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

Question

所以我一直在试图围绕CSS的特殊性，在我看来，这个公式的运作方式是：

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

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

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

＆＃13;

＆＃13;

""

＆＃13;

html > body > main > article > section > form > div > figcaption > div > p > span > em {
      color: red;
    }

    html body main article section form div figcaption div p span em {
      color: red;
    }
    
    .test {
      color: green;
    }

＆＃13;

＆＃13;

＆＃13;

Answer 1

你很困惑，

您对选择者的特异性是：

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

<强> 0,0,0,12

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

0,0,0,12

.test

0,0,1,0

揭穿这4个级别：0,0,0,0

• 第1级 - 内联样式
• 第二级-ID
• 第3级 - 类，属性和伪类
• 第4级 - 元素和伪元素

为什么文字是绿色的？

因为仅正在使用HTML 元素，其在特异性级别中是最低的（第4个）。 因此，类更具体，使文本始终为绿色

看看：

计算特异性here

查看有关特异性om W3C

的更多信息

Answer 2

  

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

确实如此。从本质上讲，你必须在一个数字系统中思考一个＆＃34;任意大的基数＆＃34;。也就是说，12个元素选择器为您提供了一个特殊性，可以描述为＆＃34; 0-0-0-12＆＃34;，它不会转换为＆＃34; 0-0-1-2＆＃ 34;，因为数字系统的基数不是10。

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

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

Answer 3

想想奥运会。什么更好：

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

就个人而言，我会选择一银和一金替代。

特殊点的分类方式。

来自规范：

  

9. Calculating a selector's specificity

     

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

     

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

     

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

     

^强调我的

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

因此，元素选择器：

 0 0 12

小于类选择器：

 0 1 0

班级胜利（1银牌vs 12铜牌队员。）

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