分组类选择器和 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 小提琴：http://jsfiddle.net/UgkZY/

我本以为第一条规则会获胜。5 个类别，而不是 3 个类别 + 1 个类型。然而，第二条规则胜出，因为 .AEF 似乎只得分为 1 级。

如果我使用以下在线CSS特异性计算器，http://specity.keegan.st/，它认为第一条规则将会获胜。事实上，在 Chrome 浏览器中，第二个获胜。

有人可以澄清一下，就 CSS 特异性而言 .ABC 确实被视为一类吗？

顺便说一句，如果我将跨度选择器添加到第一条规则中，它将获胜。

根据 CSS 规范，我认为第一个应该获胜。

http://www.w3.org/TR/selectors/#specificity

LI.red.level /* a=0 b=2 c=1 -> 特异性 = 21 */

我必须说非常令人困惑。

Answer 1

仅当比较匹配相同元素的选择器时，特异性才相关。在这种情况下，您的两个规则匹配完全不同的元素：第一个规则匹配div包含类D( div.D) 的元素，而第二个规则匹配该类内span的元素。然后会发生的情况是，这两个规则都适用，但适用于不同的元素，导致 的字体大小是的 95% ，而 又是其祖先的 100%。不会发生风格的推翻或压倒。div.Dspandiv.D

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

另外，.A.B.C算作三类；每个类选择器都有其自身的意义。