CSS特异性:为什么CSS特异性权重不是10个或更多的类选择器大于1个id选择器？

Question

在通过css特异性概念时,我理解它计算为4部分的事实

1) inline (1000)
2) id     (100)
3) class   (10)
4) html elments (1)

具有最高规则的CSS将应用于相应的元素.

我尝试了以下示例

创建了10个以上的课程

<div class="a1"> ....
     <div class="a13" id="id1"> TEXT COLOR
     </div> ... 
</div>

和css一样

.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 .a12 .a13 {
    color : red;
}
#id1 {
    color: blue;
}

现在,即使在这种情况下有13个类,权重是130.这比id大.

结果 - > JSFiddle CSS特异性

Answer 1

添加数字以获得特异性的想法实际上是错误的.计算结果在大多数情况下是相同的,但是您已经找到了它不同的边缘情况.

从W3C CSS2规范:

连接四个数字abcd(在具有大基数的数字系统中)给出了特异性.

如果您按照该页面中的示例进行操作,则会发现规则的具体情况如下:

.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 .a12 .a13    ||    0,0,13,0
#id1                                                       ||    0,1,0,0

以这种方式查看计算,很明显ID选择器获胜.实际上,一个ID选择器将覆盖任意数量的类或元素选择器.反过来,内联定义将覆盖ID样式.