CSS中的重疊規則 - 背後的真正邏輯是什麼？

考慮以下幾點：CSS中的重疊規則 - 背後的真正邏輯是什麼？

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

在我的CSS，有將匹配該選擇兩條規則：

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

，第二個是：

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

第二規則background-color到white不匹配。我認爲這將是覆蓋以前規則的規則，因爲它更具體（類別爲datepickerDisabled的單元格）。

來源

2012-08-07 oneiros

0,0,2,2 VS 0,0,2,1。第一個明顯獲勝。 – 2012-08-07 14:01:00

你會介意解釋你的答案嗎？ – oneiros 2012-08-07 14:02:24

「0,0,2,2 vs 0,0,2,1第一個明顯贏了。」

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

如果你不理解這種格式，閱讀http://www.w3.org/TR/CSS21/cascade.html#specificity：

一個選擇的特異性的計算方法如下：

計數1，如果聲明來自於 'style' （= a）（在HTML中，元素的「style」屬性的值是樣式表規則，這些規則沒有選擇器，所以a = 1，b = 0， C = 0，d = 0。）

計數ID的數量在選擇屬性（= b）的

計數在選擇器（其他屬性和僞類的數量= C）

計數選擇器中元素名稱和僞元素的數量（= d）特異性僅基於選擇器的形式。特別是，即使ID 屬性被定義爲屬性選擇器（a = 0，b = 0，c = 1，d = 0），形式爲「[id = p33]」的選擇器也被計爲源文檔的DTD中的「ID」。

連接四個數字a-b-c-d（在一個數字系統中用一個大型基數）給出了特異性。

如果你喜歡的圖片^source：

來源

2012-08-07 14:05:18

CSS中的重疊規則 - 背後的真正邏輯是什麼？

回答

相關問題