Điều gì sẽ xảy ra nếu nhiều lớp của cùng một phần tử xác định: trước phần tử giả?

Question

Tôi đang sử dụng :before để gắn thẻ các liên kết đến hồ sơ người dùng với một biểu tượng để mô tả người dùng, ví dụ bao gồm "quản trị viên", "người dùng không hoạt động", "người mới" v.v.

Vấn đề là có thể có nhiều hơn một ứng dụng.

Vậy điều gì sẽ xảy ra nếu nhiều hơn một lớp trên liên kết xác định một phần tử giả :before với content? Trình chọn cụ thể nhất có ghi đè đầu tiên không? Hay cả hai đều xuất hiện theo thứ tự? Bất cứ điều gì xảy ra, nó có phải là hành vi đáng tin cậy không?

Answer 1

Bộ chọn cụ thể nhất được ưu tiên. Đây được đề cập trong CSS2.1:

Giả thành phần cư xử giống như các yếu tố thực sự trong CSS với các ngoại lệ nêu dưới đây và elsewhere.

Xét về hành vi duyệt thực tế, theo như tôi biết, hành vi này là đáng tin cậy trên tất cả các trình duyệt hỗ trợ :before và :after trên các phần tử không được thay thế như a, trong đó CSS2.1 xác định hành vi cho các phần tử giả đó, không giống như các phần tử được thay thế như img. Điều này có ý nghĩa, bởi vì nếu nhiều hơn một phần tử giả như vậy được tạo ra, trình duyệt sẽ không biết làm thế nào nó nên đặt chúng ra trong cấu trúc định dạng. Trong ví dụ sau, theo độ đặc hiệu và tầng, a.inactive:before sẽ được ưu tiên và phần tử giả :before cho liên kết này sẽ có nội dung phù hợp (vì cả hai bộ chọn đều giống nhau - có bộ chọn loại, bộ chọn lớp và một pseudo-element):

a.administrator:before { 
 
    content: '[Administrator] '; 
 
} 
 

 
a.inactive:before { 
 
    content: '[Inactive User] '; 
 
}

<a class="administrator inactive" href="profile.php?userid=123">Username</a>

Nếu một phần tử có thể kết hợp nhiều hơn một selector với phần tử giả giống nhau, và bạn muốn tất cả trong số họ để áp dụng bằng cách nào đó, bạn sẽ cần phải tạo các quy tắc CSS bổ sung với lược bộ chọn ined để bạn có thể xác định chính xác trình duyệt nên làm gì trong những trường hợp đó. Mở rộng ví dụ trên:

a.administrator:before { 
 
    content: '[Administrator] '; 
 
} 
 

 
a.inactive:before { 
 
    content: '[Inactive User] '; 
 
} 
 

 
a.administrator.inactive:before { 
 
    content: '[Administrator] [Inactive User] '; 
 
}

<a class="administrator inactive" href="profile.php?userid=123">Username</a>