Tôi có thể có nhiều: trước phần tử giả cho cùng một phần tử không?

Có thể có nhiều giả :beforecho cùng một phần tử không?

.circle:before {
    content: "\25CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

Tôi đang cố gắng áp dụng các kiểu trên cho cùng một phần tử bằng cách sử dụng jQuery, nhưng chỉ áp dụng kiểu mới nhất, không bao giờ áp dụng cả hai kiểu.

Trong CSS2.1, một phần tử chỉ có thể có nhiều nhất một trong số các loại phần tử giả bất kỳ lúc nào. (Điều này có nghĩa là một phần tử có thể có cả một phần tử a :beforevà một :afterphần tử giả - nó chỉ không thể có nhiều hơn một trong mỗi loại.)

Kết quả là, khi bạn có nhiều :beforequy tắc khớp với cùng một phần tử, tất cả chúng sẽ phân tầng và áp dụng cho một :beforephần tử giả duy nhất , như với một phần tử bình thường. Trong ví dụ của bạn, kết quả cuối cùng trông như thế này:

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

Như bạn có thể thấy, chỉ contentkhai báo có quyền ưu tiên cao nhất (như đã đề cập, khai báo cuối cùng) mới có hiệu lực - phần còn lại của các khai báo sẽ bị loại bỏ, như trường hợp của bất kỳ thuộc tính CSS nào khác.

Hành vi này được mô tả trong phần Bộ chọn của CSS2.1 :

Phần tử giả hoạt động giống như các phần tử thực trong CSS với các ngoại lệ được mô tả bên dưới và các phần khác.

Điều này ngụ ý rằng các bộ chọn có phần tử giả hoạt động giống như các bộ chọn cho các phần tử bình thường. Điều đó cũng có nghĩa là thác nước sẽ hoạt động theo cùng một cách. Thật kỳ lạ, CSS2.1 dường như là tài liệu tham khảo duy nhất; cả css3-selectors và css3-cascade đều không đề cập đến vấn đề này và vẫn còn phải xem liệu nó có được làm rõ trong một thông số kỹ thuật trong tương lai hay không.

Nếu một phần tử có thể khớp với nhiều bộ chọn có cùng một phần tử giả và bạn muốn tất cả chúng áp dụng bằng cách nào đó, bạn sẽ cần tạo các quy tắc CSS bổ sung với các bộ chọn kết hợp để bạn có thể chỉ định chính xác những gì trình duyệt phải làm trong các trường hợp. Tôi không thể cung cấp một ví dụ đầy đủ bao gồm thuộc contenttính ở đây, vì không rõ ví dụ: biểu tượng hay văn bản nên xuất hiện trước. Nhưng bộ chọn bạn cần cho quy tắc kết hợp này là .circle.now:beforehoặc .now.circle:before- tùy chọn bộ chọn nào bạn chọn là tùy chọn cá nhân vì cả hai bộ chọn đều tương đương, đó chỉ là giá trị của thuộc contenttính mà bạn cần tự xác định.

Nếu bạn vẫn cần một ví dụ cụ thể, hãy xem câu trả lời của tôi cho câu hỏi tương tự này .

Các đặc điểm kỹ thuật di sản css3-nội dung chứa một phần về cách chèn nhiều ::beforevà ::afterpseudo-yếu tố sử dụng một ký hiệu đó là tương thích với các thác CSS2.1, nhưng lưu ý rằng tài liệu cụ thể là lỗi thời - nó chưa được cập nhật từ năm 2003, và không ai có đã triển khai tính năng đó trong thập kỷ qua. Tin tốt là tài liệu bị bỏ rơi đang được tích cực viết lại dưới dạng css-content-3 và css-pseudo-4 . Tin xấu là tính năng nhiều phần tử giả không được tìm thấy trong cả hai đặc điểm kỹ thuật, có lẽ là do thiếu sự quan tâm của người triển khai.

Nếu phần tử chính của bạn có một số phần tử con hoặc văn bản, bạn có thể tận dụng nó.

Định vị phần tử chính của bạn tương đối (hoặc tuyệt đối / cố định) và sử dụng cả hai: trước và: sau khi định vị tuyệt đối (trong tình huống của tôi, nó phải là tuyệt đối, không biết về của bạn).

Bây giờ nếu bạn muốn thêm một phần tử giả nữa, hãy đính kèm một phần tử tuyệt đối: before vào một trong những phần tử con của phần tử chính (nếu bạn chỉ có văn bản, hãy đặt nó trong một khoảng, bây giờ bạn có một phần tử), không phải là tương đối / tuyệt đối / cố định .

Yếu tố này sẽ bắt đầu hoạt động giống như chủ sở hữu của nó là yếu tố chính của bạn.

HTML

<div class="circle">
    <span>Some text</span>
</div>

CSS

.circle {
    position: relative; /* or absolute/fixed */
}

.circle:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle:after {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle span {
    /* not relative/absolute/fixed */
}

.circle span:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

Tôi đã giải quyết vấn đề này bằng cách sử dụng:

.element:before {
    font-family: "Font Awesome 5 Free" , "CircularStd";
    content: "\f017" " Date";
}

Sử dụng họ phông chữ "font awesome 5 free" cho biểu tượng và sau đó, Chúng tôi phải chỉ định lại phông chữ mà chúng tôi đang sử dụng bởi vì nếu chúng tôi không làm điều này, điều hướng sẽ sử dụng phông chữ mặc định (lần la mã mới hoặc tương tự như điều này).