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：

  

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

     

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

     

连接四个数字a-b-c-d（在带有数字的数字系统中）   大基数）给出了特异性。

如果您更喜欢图片 ^source ：