为什么12元素选择器不覆盖CSS中的单个类选择器？

因此，我一直在努力思考CSS的特殊性，在我看来，公式的工作方式是：

10^0*（元素+伪元素选择器）+10^1*（类+属性+伪类选择器）+10^2*（id选择器）+10^3*（内联选择器）

因此，作为一个实验，我创建了一个HTML页面，其中有12个嵌套元素选择器应用于一段文本，还有一个类选择器。在这种情况下，似乎许多元素选择器应该覆盖单个类选择器，但它们没有。本例中，如果元素选择器获胜，则以红色呈现文本，如果类选择器获胜，则以绿色呈现文本

发生什么事了？我是否误解了特殊性公式？单个类选择器是否总是胜过任意数量的元素选择器？这就是为什么id选择器被认为是一种代码气味，因为它们会覆盖任意数量的属性和类选择器吗

html>body>main>article>section>form>div>figcaption>div>p>span>em{
颜色：红色；
}
html正文主要文章部分表单div figcaption div p span em{
颜色：红色；
}
.测试{
颜色：绿色；
}

测试123

你把事情弄糊涂了

您对选择器的特殊性是：

html > body > main > article > section > form > div > figcaption > div > p > span > em 

0,0,0,12

---

0,0,0,12

---

0,0,1,0

---

揭穿这4个级别：

0,0,0,0

• 第一级-内联样式
• 第二级-IDs
• 第三级-类、属性和伪类
• 第四级-元素和伪元素

---

为什么文本是绿色的？ 因为您只使用HTML元素，而HTML元素在特异性级别上是最不重要的（第四）。 因此类更具体，使文本始终为绿色

看一看:

计算特异性

---

查看更多关于特殊性的信息，你在搞混事情

您对选择器的特殊性是：

html > body > main > article > section > form > div > figcaption > div > p > span > em 

0,0,0,12

---

0,0,0,12

---

0,0,1,0

---

揭穿这4个级别：

0,0,0,0

• 第一级-内联样式
• 第二级-IDs
• 第三级-类、属性和伪类
• 第四级-元素和伪元素

---

为什么文本是绿色的？ 因为您只使用HTML元素，而HTML元素在特异性级别上是最不重要的（第四）。 因此类更具体，使文本始终为绿色

看一看:

计算特异性

请参阅有关om的更多信息

单个类选择器是否总是胜过任意数量的元素选择器

就是这样。本质上，你必须在一个“任意大基数”的数字系统中思考。也就是说，12元素选择器为您提供了一种特殊性，可以描述为“0-0-0-12”，它不会转换为“0-0-1-2”，因为数字系统的基数不是10

是的，这也是人们建议避免使用ID选择器的原因之一

是一个相关的规范，虽然我并不认为他们的例子有助于澄清这个问题

单个类选择器是否总是胜过任意数量的元素选择器

就是这样。本质上，你必须在一个“任意大基数”的数字系统中思考。也就是说，12元素选择器为您提供了一种特殊性，可以描述为“0-0-0-12”，它不会转换为“0-0-1-2”，因为数字系统的基数不是10

是的，这也是人们建议避免使用ID选择器的原因之一

---

是一个相关的规范，尽管我并不认为他们的例子有助于澄清这个问题……

想想奥运会。更好的是：

• 五枚铜牌还是一枚银牌
• 三枚银牌还是一枚金牌

就我个人而言，我会选择一银一金的替代品

这就是特异性点的分类方式

根据规范：

选择器的特异性计算如下：

• 计算选择器中ID选择器的数量（=a）
• 计算选择器中的类选择器、属性选择器和伪类的数量（=b）
• 计算选择器中类型选择器和伪元素的数量（=c）

连接三个数字a-b-c（在具有大 碱基）给出了特异性。

重点矿山

换句话说，数字和连接都很重要

因此，元素选择器：

 0 0 12

 0 1 0

小于类选择器：

 0 0 12

 0 1 0

全班获胜（1枚银牌对12枚铜牌）

---

你可以有100个元素选择器，而这个类仍然会赢。

想想奥运会吧。更好的是：

• 五枚铜牌还是一枚银牌
• 三枚银牌还是一枚金牌

就我个人而言，我会选择一银一金的替代品

这就是特异性点的分类方式

根据规范：

选择器的特异性计算如下：

• 计算选择器中ID选择器的数量（=a）
• 计算选择器中类选择器、属性选择器和伪类的数量