哪些类选择器规则对10个标记具有更高的特异性？
.A.E.F .C .D
要么
.A .B .C span
HTML：
<div class="A E F">
<div class="B">
<div class="C">
<div class="D">
<span>17590</span>
<span>Points</span>
</div>
</div>
</div>
</div>
CSS：
.A.E.F .C .D /* span */ {
font-size: 1em;
}
.A .B .C span {
font-size: .95em;
}
这是一个演示问题的JS小提琴：http://jsfiddle.net/UgkZY/
我本以为第一个规则会赢。 5个类，而不是3个类+ 1个类型。但是，第二条规则胜出，因为.A.E.F似乎只得分为1级。
如果我使用以下在线CSS特异性计算器http://specificity.keegan.st/，则它认为第一个规则将获胜。实际上，在Chrome浏览器中，第二个胜出。
有人可以澄清一下，.A.B.C实际上在CSS特异性方面仅被视为一类吗？
顺便说一句，如果我将范围选择器添加到第一个规则，它将胜出。
根据我的CSS规范，看起来第一个应该赢。
http://www.w3.org/TR/selectors/#specificity
LI.red.level / * a = 0 b = 2 c = 1->特异性= 21 * /
我必须说非常混乱。
最佳答案
特异性仅在比较匹配相同元素的选择器时才有意义。在这种情况下，您的两个规则匹配完全不同的元素：第一个规则匹配包含类div（D）的div.D元素，而第二个规则匹配该span中的div.D元素。然后发生的事情是，这两个规则都适用，但是适用于不同的元素，导致span的字体大小是div.D的字体大小的95％，而该字体大小又是其祖先的字体大小的100％。不会否决或推翻样式。
如果将span添加到第一条规则，这将使其与第二条规则同样适用的span中相同的div.D元素匹配。只有这样，特异性才起作用：根据对类选择器的计数，第一个规则最终将覆盖第二个规则。
另外，.A.B.C算作三类。每个类选择器都会自己计算。