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中的重叠规则 - 背后的真正逻辑是什么？

回答

相关问题