CSS特异性：意外的行为

我一直在遵循关于CSS特定性的this article。它将值分配给选择器，具有最高值的选择器将具有优先权。CSS特异性：意外的行为

的ID具有100 的值的类具有10

值我的问题是在这个例子中我尝试。

HTML

<div id="id" class="a b c d e f g h i j k l">What color?</div>

CSS

/* calculated specificity: 100 */ 
#id{ 
    color:red; 
} 

/* calculated specificity: 120 */ 
.a.b.c.d.e.f.g.h.i.j.k.l{ 
    color:green; 
}

我预期的股利是绿色的，因为12个班将有120的价值，但它是红色的，当我运行它。我的计算有问题吗？

在那篇文章中，它对于扑克玩家（它很整洁）具有CSS特异性，它具体说道：“就像任何三对三打一对，使用ID选择器的CSS规则都会违反规则“所以，如果你有20个班级，那么ID并不重要。 – snollygolly

@SLoW因此，如果id总是击败class，那么赋值和加总的概念就没有意义了。是对的吗？ – Sionnach733

是的，我个人不会打扰分配一堆类来覆盖和ID分配。我只是给它一个不同的ID并为自己节省一些麻烦。 :) – snollygolly

ID胜过类特异性MDN states：

以下选择的列表是通过增加特异性：

通用选择

类型选择

类选择
个
属性选择

伪类

ID选择

内嵌样式

特异性计算可能有点令人困惑，但你必须记住，作为W3 states，当计算连接的特异性，而不是将数字相加。

因此，例如：

所以是的，ID每次都会超过纯粹的课程选择。

2014-02-12 14:22:47 j08691

作为euchre粉丝我+1使用王牌 – Huangism

在这种情况下，说价值体系有缺陷是否公平？ – Sionnach733

@ Sionnach733 - 我在我的答案中加了一点解释。 – j08691

回答