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;
}

将背景颜色设置为白色的第二条规则不匹配.我认为这将是覆盖先前规则的规则,因为它更具体(具有类datepickerdisabled的单元格).

解决方法

“0,2,2 vs 0,1.第一个明显胜出.”

tbody           Element      d
.datepickerDays Class        c
td              Element      d
:hover          Pseudo-class c
                              = 0,2

td                  Element      d
.datepickerdisabled Class        c
:hover              Pseudo-class c
                              = 0,1

如果您不理解这种格式,请阅读http://www.w3.org/TR/CSS21/cascade.html#specificity：

A selector’s specificity is calculated as follows:

• count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector,0 otherwise (= a) (In HTML,values of an
  element’s “style” attribute are style sheet rules. These rules have no
  selectors,so a=1,b=0,c=0,and d=0.)
• count the number of ID attributes in the selector (= b)
• count the number of other attributes and pseudo-classes in the selector (= c)
• count the number of element names and pseudo-elements in the selector (= d) The specificity is based only on the form of the
  selector. In particular,a selector of the form “[id=p33]” is counted
  as an attribute selector (a=0,c=1,d=0),even if the id
  attribute is defined as an “ID” in the source document’s DTD.

Concatenating the four numbers a-b-c-d (in a number system with a
large base) gives the specificity.

如果您更喜欢图片source：