Quy tắc chồng chéo trong CSS - logic thực sự đằng sau là gì?

Question

xem xét như sau:

<td class="datepickerDisabled"><a href="#"><span>12</span></a></td> 

Trong css của tôi, có hai nguyên tắc đó sẽ phù hợp cho selector này:

tbody.datepickerDays td:hover { 
    border-radius: 2px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
    background-color: #ddd; 
} 

Và điều thứ hai là:

td.datepickerDisabled:hover { 
    background-color: white; 
} 

Thứ hai quy tắc để đặt background-color thành white không khớp. Tôi sẽ nghĩ rằng đó sẽ là quy tắc ghi đè quy tắc trước đó vì quy tắc cụ thể hơn (các ô có lớp datepickerDisabled).

Answer 1

"0,0,2,2 so với 0,0,2,1. Người đầu tiên thắng rõ ràng".

tbody   Element  d 
.datepickerDays Class  c 
td    Element  d 
:hover   Pseudo-class c 
           = 0,0,2,2 

td     Element  d 
.datepickerDisabled Class  c 
:hover    Pseudo-class c 
           = 0,0,2,1 

Nếu bạn không hiểu định dạng này, đọc http://www.w3.org/TR/CSS21/cascade.html#specificity:

đặc hiệu của một selector được tính như sau:

• đếm 1 nếu khai báo là từ là một 'phong cách' thuộc tính chứ không phải là quy tắc với công cụ chọn, 0 nếu không (= a) (Trong HTML, các giá trị thuộc tính "phong cách" của một phần tử là các quy tắc trang tính. Các quy tắc này không có bộ chọn , vì vậy a = 1, b = 0, c = 0 và d = 0.)
• đếm số ID thuộc tính trong bộ chọn (= b)
• đếm số lượng các thuộc tính khác và pseudo-classes trong bộ chọn (= c)
• đếm số lượng tên phần tử và phần tử giả trong bộ chọn (= d) Độ đặc hiệu chỉ dựa trên hình thức bộ chọn . Cụ thể, bộ chọn của biểu mẫu "[id = p33]" được tính làm công cụ chọn thuộc tính (a = 0, b = 0, c = 1, d = 0), ngay cả khi thuộc tính id được định nghĩa là "ID" trong DTD của tài liệu nguồn.

Ghép bốn số a-b-c-d (trong một hệ thống số với đế lớn) mang lại tính đặc hiệu.

Nếu bạn thích một bức tranh ^source: