分组类选择器和 CSS 特异性答案

【问题标题】：Grouped Class Selectors and CSS Specificity分组类选择器和 CSS 特异性
【发布时间】：2013-01-14 15:20:41
【问题描述】：

哪些类选择器规则对 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 x 类而不是 3 x 类 + 1 x 类型。但是，第二条规则胜出，因为 .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 */

我必须说非常令人困惑。

【问题讨论】：

标签： css css-selectors css-specificity

【解决方案1】：

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

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

另外，.A.B.C 算作三类；每个类选择器都为自己计数。

【讨论】：

我看到了我的困境 - 查看 Chrome 并选择了内部 span 元素，并看到“.AEF .C .D”被“.A 覆盖”的“继承自 div.D”规则。 B .C span”规则，我认为特异性在起作用。但是正如您正确指出的那样，这仅在匹配元素后才适用。我在元素选择和特异性之间感到困惑。非常感谢您解决这个问题。

【解决方案2】：

确实，第二个选择器获胜。这可能是因为 .A.E.F 以 HTML 树中的 single 元素为目标。

【讨论】：