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大。

结果 - ＆gt; JSFiddle CSS specificity

Answer 1

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

来自W3C CSS2 specification：

  

连接四个数字a-b-c-d（在具有大碱基的数字系统中）给出了特异性。

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

.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样式。

Answer 2

更像是：

1) inline       (1.0.0.0)
2) id           (0.1.0.0)
3) class        (0.0.1.0)
4) html elments (0.0.0.1)

E.g。无论你将提供多少类选择器，它们都永远不会超越id。

根据你的标记

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

相应的权重是：

0.0.13.0 <-- for the classes
0.1.0.0 <-- for the ID