Question

哪个类选择器规则对10个标记具有更高的特异性？

.A.E.F .C .D

OR

.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 - ＆gt;特异性= 21 * /

我必须说非常混乱。

Answer 1

特异性仅在比较匹配相同元素的选择器时才有意义。在这种情况下，您的两个规则匹配完全不同的元素：第一个规则匹配包含类div（D）的div.D元素，而第二个规则匹配span元素在里面div.D。然后会发生两种规则，但是对于不同的元素，导致span的字体大小为div.D的95％，而后者则是其祖先的100％。没有超越或压倒风格。

如果您将span添加到第一条规则，则会使其与第二条规则也适用的span内的div.D元素相匹配。只有这样才能发挥特异性：第一条规则最终会基于对类选择器进行计数来覆盖第二条规则。

此外，.A.B.C计为三个类;每个类选择器都为自己计算。

Answer 2

确实，第二个选择器赢了。这可能是因为.A.E.F针对HTML树中的单个元素。

分组选择器和CSS特性

2 个答案: