css - CSS 特异性：为什么 10 个或更多类选择器的 CSS 特异性权重不大于 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。

score 8 · Accepted Answer

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

连接四个数字 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 样式。

score 1 · Accepted Answer

它更像是：

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)

例如，无论您将提供多少类选择器，它们都不会超出 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

2 回答 2