为什么 12 个元素选择器不会覆盖 CSS 中的单个类选择器？ [复制]答案

【问题标题】：Why do 12 element selectors not override single class selector in CSS? [duplicate]为什么 12 个元素选择器不会覆盖 CSS 中的单个类选择器？ [复制]
【发布时间】：2017-08-08 02:51:54
【问题描述】：

所以我一直试图围绕 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 {
      color: red;
    }

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

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  </head>

  <body>
    <main>
      <article>
        <section>
          <form>
            <div>
              <figcaption>
                <div>
                  <p>
                    <span>
                      <em class="test">TESTING 123</em>
                    </span>
                  </p>
                </div>
              </figcaption>
            </div>
          </form>
        </section>
      </article>
    </main>
  </body>
</html>

【问题讨论】：

快速阅读这篇文章：smashingmagazine.com/2007/07/…

标签： css css-selectors css-specificity

【解决方案1】：

想想奥运会。更好的是：

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

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

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

来自规范：

9. Calculating a selector's specificity

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

统计选择器中 ID 选择器的数量 (= a)

统计选择器中类选择器、属性选择器和伪类的数量 (= b)

统计选择器中类型选择器和伪元素的数量 (= c)

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

^强调我的

换句话说，数量和串联都很重要。

因此，元素选择器：

 0 0 12

小于类选择器：

 0 1 0

班级获胜（1 银对 12 铜）。

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

【讨论】：

谢谢！每天学习新东西。

【解决方案2】：

你把事情弄糊涂了，

您对选择器的特殊性是：

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

第一级 - 内联样式
第二级 -ID
第三级 - 类、属性和伪类
第 4 级 - 元素和伪元素

为什么文字是绿色的？

因为您只有在使用 HTML 元素，这在特异性级别是最低的重要（第 4 级）。因此，类更具体，使文本始终为绿色

看看：

计算特异性here

查看更多关于特异性的信息 om W3C

【讨论】：

明白了，感谢您提供计算器的链接！

【解决方案3】：

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

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

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

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

【讨论】：

谢谢——我知道关键是“任意大的基数”。 :)