考虑以下：
<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.
