CSS特异性：意外行为

Question

我一直在关注CSS特定的this article。它为选择器分配值，具有最高值总和的选择器将具有优先权。

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;
}

我希望div是绿色的，因为12个类的值为120.但是当我运行它时它是红色的。我的计算有问题吗？

DEMO

Answer 1

ID将类特异性胜过MDN states：

  

以下选择者列表是通过提高特异性来实现的：

     

  
• 通用选择器
  
• 类型选择器
  
• 班级选择器
  
• 属性选择器
  
• 伪类
  
• ID选择器
  
• 内联样式
  

特异性计算可能有点令人困惑，但您需要记住，W3 states，在计算连接的特异性时，不要将数字加在一起。

例如：

• #id具有特异性= 0,1,0,0
• .a.b.c.d.e.f.g.h.i.j.k.l的特异性= 0,0,12,0

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