css - 分组类选择器和 CSS 特异性

Question

哪个类别选择器规则对 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 fiddle :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 -> specificity = 21 */

我必须说非常困惑。

Answer 1

特异性仅在比较匹配相同元素的选择器时才有意义。在这种情况下，您的两个规则匹配完全不同的元素:第一个规则匹配包含类 D (div.D) 的 div 元素，而第二条规则匹配 div.D 的 span 元素 inside。然后发生的是这两个规则都适用，但适用于不同的元素，导致 span 的字体大小为 div.D 的字体大小的 95%，这又是其祖先的 100%。不会发生样式的否决或覆盖。

如果您将 span 添加到第一条规则，这会导致它与第二条规则匹配 div.D 中相同的 span 元素也适用于。只有这样特异性才会发挥作用:第一个规则最终会根据类选择器的计数覆盖第二个规则。

此外，.A.B.C 算作三类；每个类选择器都有其自身的值(value)。