CSS中的重叠规则 - 背后的真正逻辑是什么？

Question

考虑以下:

<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).

Answer 1

"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:

选择器的特异性计算如下:

• 如果声明来自的是一个'style'属性而不是一个带选择器的规则,则为1;否则为0(= a)(在HTML中,元素的"style"属性的值是样式表规则.这些规则没有选择器,所以a = 1,b = 0,c = 0,d = 0.)
• 计算选择器中ID属性的数量(= b)
• 计算选择器中其他属性和伪类的数量(= c)
• 计算选择器中元素名称和伪元素的数量(= d)特异性仅基于选择器的形式.特别是,"[id = p33]"形式的选择器被计为属性选择器(a = 0,b = 0,c = 1,d = 0),即使id属性被定义为"ID" "在源文档的DTD中.

连接四个数字abcd(在具有大基数的数字系统中)给出了特异性.

如果您更喜欢图片^来源: