CSS 特异性中的点数是如何计算的 [英] How are the points in CSS specificity calculated

问题描述

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

Researching specificity I stumbled upon this blog - http://www.htmldog.com/guides/cssadvanced/specificity/

它指出特异性是 CSS 的评分系统.它告诉我们元素值 1 分，类值 10 分，ID 值 100 分.它还在上面说这些点是总计的，总量是选择器的特异性.

It states that specificity is a point-scoring system for CSS. It tells us that elements are worth 1 point, classes are worth 10 points and IDs are worth 100 points. It also goes on top say that these points are totaled and the overall amount is that selector's specificity.

例如:

身体 = 1分
body .wrapper = 11 分
body .wrapper #container = 111 分

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

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

So, using these points, I expect the following CSS and HTML to result in the text being blue:

#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 分，文本是红色的?

Why is the text red when 15 classes would equal 150 points compared to 1 ID which equals 100 points?

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

Apparently the points aren’t just totaled; they’re concatenated. Read more about that here - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

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

Does that mean that the classes in our selector = 0,0,15,0 OR 0,1,5,0?

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

(my instincts tell me it’s the former, as we KNOW the ID selector’s specificity looks like this: 0,1,0,0)

推荐答案

Pekka 的回答 实际上em> 正确，并且可能是思考问题的最佳方式.

Pekka's answer is practically correct, and probably the best way to think about the issue.

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

However, as many have already pointed out, the W3C CSS recommendation states that "Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity." So the geek in me just had to figure out just how large this base is.

事实证明，非常大的基数"是采用(至少被 4 个最常用的浏览器^*)来实现这个标准算法是 256 或 2⁸.

It turns out that the "very large base" employed (at least by the 4 most commonly-used browsers^*) to implement this standard algorithm is 256 or 2⁸.

这意味着用 0 个 id 和 256 个类名指定的样式将覆盖只用 1 个 id 指定的样式.我用一些小提琴对此进行了测试:

What this means is that a style specified with 0 ids and 256 class-names will over-ride a style specified with just 1 id. I tested this out with some fiddles:

• 255 个类不够覆盖 1 个 id

• 255 classes are not enough to override 1 id

...但是 256 个类 足以覆盖 1 个 id

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

...和 ​​256 个标签名 足以覆盖1 个类名

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

...但是，唉，256 个 id 不够覆盖 1 个内联样式(2012/8/15 更新——您必须使用 !important)

...but, alas 256 ids are not enough to override 1 inline style (Updated 2012/8/15 -- you'll have to use !important)

因此，实际上存在一个积分系统".但它不是基数 10.它是基数 256.这是它的工作原理:

So there is, effectively, a "point system," but it's not base 10. It's base 256. Here's how it works:

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

(2⁸)² or 65536, times the number of ids in the selector

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

• (2⁸)¹ or 256, times the number of class-names in the selector
• (2⁸)⁰ or 1, times the number of tag-names in the selector

这对于传达概念的粗略练习不是很实用.
这可能是有关该主题的文章一直使用基数 10 的原因.

This isn't very practical for back-of-the-envelop exercises to communicate the concept.
That's probably why articles on the topic have been using base 10.

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

***** [Opera uses 2¹⁶ (see karlcow’s comment). Some other selector engines use infinity — effectively no points system (see Simon Sapin’s comment).]

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

Update, July 2014:
As Blazemonger pointed out earlier in the year, webkit browsers (Chrome, Safari) now appear to use a higher base than 256. Perhaps 2¹⁶, like Opera? IE and Firefox still use 256.

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

Update, March 2021:
Firefox no longer uses 256 as a base.

这篇关于CSS 特异性中的点数是如何计算的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！