Mức độ cụ thể CSS giữa các lớp/lớp giả và các phần tử/phần tử giả hoạt động như thế nào?

Question

Tôi đang sử dụng các định nghĩa sau (chuyển thể từ CSS2 đặc tả http://www.w3.org/TR/CSS21/cascade.html#specificity)

• a = sử dụng thuộc tính phong cách trên một yếu tố
• b = số thuộc tính id
• c = số thuộc tính (lớp) và các lớp học giả (: liên kết,: hover)
• d = số yếu tố và giả yếu tố (: đầu tiên-line,: đầu tiên chữ)

Với phong cách sau đây (tính toán của tôi sang bên phải):

.content   {color: green;} /* a=0 b=0 c=1 d=0 -> 0,0,1,0 */ 
.content:hover {color: yellow;} /* a=0 b=0 c=2 d=0 -> 0,0,2,0 */ 
li    {color: orange;} /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */ 
li:first-line  {color: pink;} /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */ 

và html sau

<li class="content">The first line</li> 

Khi tôi mở nó lên trong một trình duyệt, các dòng văn bản là màu hồng. Tôi nghĩ rằng nó sẽ có màu xanh lá cây và trên di chuột, nó sẽ có màu vàng. Tôi nghĩ rằng các yếu tố và các yếu tố giả (d trong tính toán) có trọng lượng ít hơn so với các lớp học và các lớp giả (c trong tính toán).

Answer 1

Tôi đoán rằng :first-line cụ thể hơn chỉ là .content. Vì vậy, dòng đầu tiên của văn bản là màu hồng, nhưng dấu đầu dòng của danh sách là màu xanh lục (và màu vàng khi di chuột). Mọi thứ đều tốt, như đối với tôi.

Hãy tưởng tượng rằng bộ chọn :first-line chỉ là một chọn nút văn bản lồng nhau, như:

<li class="content"> 
    <text:text>The first line</text:text><br /> 
    The second line 
</li> 

Nó hoạt động trên các yếu tố lồng nhau, vì vậy nó là quan trọng hơn bất kỳ chọn khác.

Answer 2

Sự hiểu biết của bạn về tính đặc hiệu là hoàn toàn chính xác. Các lớp và lớp giả tương đương nhau về tính đặc hiệu, và cả hai lớp đều xếp hạng cao hơn các phần tử và phần tử giả (cũng bằng nhau). Đây là explained pretty clearly theo thông số bạn đã liên kết.

Vậy tại sao các quy tắc bạn đặt trong li:first-line được ưu tiên hơn các quy tắc bạn đặt trong .content:hover, nếu quy tắc sau cụ thể hơn?

Bởi vì, từ quan điểm của CSS, các phần tử giả là các phần tử. Điều đó có nghĩa là bạn có một phần tử li:first-line - nếu bạn không tạo kiểu cho nó - sẽ kế thừacolor: green hoặc color: yellow từ các quy tắc .content và .content:hover. Nhưng các quy tắc nhắm mục tiêu một yếu tố trực tiếp luôn được ưu tiên hơn các quy tắc thừa kế và bộ chọn :first-line của bạn đang nhắm mục tiêu một phần tử giả trong vòngli của bạn. Các quy tắc :first-line giành chiến thắng đơn giản chỉ vì chúng không được kế thừa và các quy tắc từ .content và .content:hover bộ chọn là được kế thừa (bởi phần tử giả nằm trong li). Quy tắc cụ thể là cá trích đỏ; họ thậm chí không đi vào chơi.