7

考虑以下：

<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不匹配。我认为这将是覆盖先前规则的规则，因为它更具体（带有 class 的单元格datepickerDisabled）。

4

1 回答 1

10

“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 如果声明来自是“样式”属性而不是带有选择器的规则，否则为 0 (= a) （在 HTML 中，元素的“样式”属性的值是样式表规则。这些规则没有选择器，所以 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（在具有大基数的数字系统中）给出了特异性。

如果您更喜欢图片来源：

于 2012-08-07T14:05:18.513 回答