0

哪些类选择器规则对 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 类型。然而，第二条规则胜出，因为 .AEF 似乎只得分为 1 级。

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

有人可以澄清一下 .ABC 在 CSS 特异性方面确实被认为只是一类吗？

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

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

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

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

我必须说非常令人困惑。

4

2 回答 2

4

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

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

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

于 2013-01-30T17:47:22.893 回答
0

实际上，第二个选择器获胜。这可能是因为 .AEF以 HTML 树中的单个元素为目标。

于 2013-01-30T17:45:46.083 回答