css - CSS specificity中的points是怎么计算的

Question

研究特异性我偶然发现了这个博客 - http://www.htmldog.com/guides/cssadvanced/specificity/

它指出特异性是 CSS 的评分系统。它告诉我们元素值 1 分，类值 10 分，ID 值 100 分。最重要的是说这些点是总计的，总数是选择者的特殊性。

例如:

body = 1 point
body .wrapper = 11 points
body .wrapper #container = 111 points

因此，使用这些点，我希望以下 CSS 和 HTML 导致文本为蓝色:

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}

<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          <div class="f">
            <div class="g">
              <div class="h">
                <div class="i">
                  <div class="j">
                    <div class="k">
                      <div class="l">
                        <div class="m">
                          <div class="n">
                            <div class="o" id="a">
                              This should be blue.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

为什么 15 个类等于 150 分，而 1 个 ID 等于 100 分，为什么文本是红色的？

显然，分数不只是总计；他们是串联的。在这里阅读更多相关信息 - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

这是否意味着我们的选择器中的类 = 0,0,15,0 OR 0,1,5,0？

(我的直觉告诉我是前者，因为我们知道 ID 选择器的特殊性如下所示:0,1,0,0)

Answer 1

Pekka's answer 实际上是正确的，并且可能是思考问题的最佳方式。

但是，正如许多人已经指出的那样，W3C CSS 建议声明“连接三个数字 a-b-c(在具有大基数的数字系统中)给出了特异性。”所以我这个极客只需要弄清楚这个基数有多大。

事实证明，用于实现此标准算法的“非常大的基数”(至少 4 种最常用的浏览器^*)是 256 或 2⁸.

这意味着用 0 个 id 和 256 个类名指定的样式将覆盖仅用 1 个 id 指定的样式。我用一些 fiddle 测试了这个:

• 255 classes are not enough to override 1 id

• ...but 256 classes are enough to override 1 id

• ...and 256 tag-names are enough to override 1 class-name

• ...but, alas 256 ids are not enough to override 1 inline style (更新于 2012 年 8 月 15 日——您必须使用 !important)

因此实际上有一个“积分系统”，但它不是以 10 为底数，而是以 256 为底数。这是它的工作原理:

(2⁸)² 或 65536，乘以选择器中的 ID 数量

• (2⁸)¹ 或 256，乘以选择器中类名的数量
• (2⁸)⁰ 或 1，乘以选择器中标记名称的数量

这对于传达概念的粗略练习来说不是很实用。
这可能就是关于该主题的文章一直使用 10 进制的原因。

***** [Opera 使用 2¹⁶(参见 karlcow 的评论)。其他一些选择器引擎使用 infinity — 实际上没有积分系统(参见 Simon Sapin 的评论)。]

2014 年 7 月更新:
正如 Blazemonger 在今年早些时候指出的那样，webkit 浏览器(Chrome、Safari)现在似乎使用了比 256 更高的基数。也许是 2¹⁶，比如 Opera？ IE 和 Firefox 仍然使用 256。

2021 年 3 月更新:
Firefox 不再使用 256 作为基础。