CSS 特异性中的点是如何计算的

How are the points in CSS specificity calculated

提问by Sam

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

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

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.

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

For example:

例如：

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

body= 1 点
body .wrapper= 11 点
body .wrapper #container= 111 点

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

因此，使用这些要点，我希望以下 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>

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

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

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

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

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

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

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

（我的直觉告诉我，这是前者，正如我们所知道的ID选择的特异性看起来是这样的：0,1,0,0）

回答by Faust

Pekka's answeris practicallycorrect, and probably the best way to think about the issue.

Pekka 的回答实际上是正确的，并且可能是思考这个问题的最佳方式。

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.

然而，正如许多人已经指出的那样，W3C CSS 建议指出“连接三个数字 abc（在具有大基数的数字系统中）给出了特殊性。” 所以我的极客只需要弄清楚这个基地有多大。

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⁸.

事实证明，用于实现该标准算法的“非常大的基数”（至少由 4 个最常用的浏览器^*）是 256 或 2 ⁸。

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

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

• 255 classes are notenough to override 1 id
• ...but 256 classes areenough to override 1 id

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

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

• 255类是不足够覆盖1号
• ......但256类是足以覆盖1号

• ... 256标签名称是足以覆盖1类名

• ......但是，唉256个ID是不足够覆盖1种内嵌样式（更新2012年8月15日-你将不得不使用!important）

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

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

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

(2 ⁸) ²或 65536，乘以选择器中的 id 数
+ (2 ⁸) ¹或 256，乘以选择器中的类名数
+ (2 ⁸) ⁰或 1，乘以标记数-选择器中的名称

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.

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

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

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

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.

2014 年 7 月更新：
正如 Blazemonger 在今年早些时候指出的那样，webkit 浏览器（chrome、safari）现在似乎使用比 256 更高的基数。也许 2 ¹⁶，像 Opera？IE 和 Firefox 仍然使用 256。

回答by Pekka

Good question.

好问题。

I can't tell for sure - all the articles I manage to find avoid the example of multiple classes, e.g. here- but I assume that when it comes to comparing the specifity between a class selector and an ID, the class gets calculated with a value of 15only, no matter how detailed it is.

我不能肯定 - 我设法找到的所有文章都避免了多个类的例子，例如这里- 但我假设当涉及到比较类选择器和 ID 之间的特异性时，类是用一个值的15唯一，无论它多么详细。

That matches my experience in how specificity behaves.

这符合我在特异性行为方面的经验。

However, there mustbe some stacking of classes because

但是，必须有一些类的堆叠，因为

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

is more specific than

比

.o

the only explanation I have is that the specificity of stacked classes is calculated only against each other but not against IDs.

我唯一的解释是堆叠类的特异性仅针对彼此计算，而不是针对 ID。

Update: I half-way get it now. It is not a points system, and the information about classes weighing 15 points is incorrect. It is a 4-part numbering system very well explained here.

更新：我现在半途而废。不是积分制，15分的班级信息有误。这是一个由 4 部分组成的编号系统，这里有很好的解释。

The starting point is 4 figures:

起点是4个数字：

style  id   class element
0,     0,   0,    0

According to the W3C explanation on specificity, the specificty values for the abovementioned rules are:

根据W3C 关于特殊性的解释，上述规则的特殊性值为：

#a            0,1,0,0    = 100
classes       0,0,15,0   = ... see the comments

this is a numbering system with a very large (undefined?) base.

这是一个具有非常大（未定义？）基数的编号系统。

My understanding is that because the base is very large, no number in column 4 can beat a number > 0 in column 3, the same for column 2, column 1 .... Is this correct?

我的理解是，因为基数很大，第 4 列中的任何数字都无法击败第 3 列中 > 0 的数字，第 2 列、第 1 列也是如此......这是正确的吗？

I'd be interested whether somebody with a better grasp at Math than me could explain th numbering system and how to convert it to decimal when the individual elements are larger than 9.

我很感兴趣，是否有人比我更了解数学，可以解释编号系统以及当单个元素大于 9 时如何将其转换为十进制。

回答by James Donnelly

The current Selectors Level 4 Working Draftdoes a good job of describing Specificity in CSS:

当前的Selectors Level 4 Working Draft很好地描述了 CSS 中的特殊性：

Specificities are compared by comparing the three components in order: the specificity with a larger Avalue is more specific; if the two Avalues are tied, then the specificity with a larger Bvalue is more specific; if the two Bvalues are also tied, then the specificity with a larger cvalue is more specific; if all the values are tied, the two specifities are equal.

特异度是按顺序比较三个分量：A值越大特异度越特异；如果两个A值并列，则B值越大的特异性越特异；如果两个B值也并列，那么c值越大的特异性越特异；如果所有值都相同，则两个规格相等。

This means that the values A, B and C are completely independent of each other.

这意味着值 A、B 和 C 彼此完全独立。

15 classes doesn't give your selector a specificity score of 150, it gives it a Bvalue of 15. A single Avalue is enough to overpower this.

15 个类别不会给您的选择器 150 的特异性分数，而是给它15的B值。单个A值足以压倒它。

As a metaphor, imagine a family of 1 grand parent, 1 parent and 1 child. This could be represented as 1,1,1. If the parent has 15 children, that doesn't suddenly make them another parent (1,2,0). It means that the parent has an awful lot more responsibility than they had with just 1 child (1,1,15). ;)

作为一个比喻，想象一个有 1 个祖父母、1 个父母和 1 个孩子的家庭。这可以表示为1,1,1。如果父母有 15 个孩子，那不会突然让他们成为另一个父母（1,2,0）。这意味着与只有 1 个孩子 ( 1,1,15)相比，父母的责任要大得多。;)

The same documentation also goes on to say:

相同的文档还继续说：

Due to storage limitations, implementations may have limitations on the size of A, B, or c. If so, values higher than the limit must be clamped to that limit, and not overflow.

由于存储限制，实现可能对A、B或c的大小有限制。如果是这样，高于限制的值必须被限制在该限制内，而不是溢出。

This has been added to tackle the problem presented in Faust's answer, whereby CSS implementations back in 2012 allowed specificity values to overflow into each other.

添加这个是为了解决Faust 的回答中提出的问题，即 2012 年的 CSS 实现允许特定值相互溢出。

Back in 2012, most browsers implemented a limitation of 255, but this limitation was allowed to overflow. 255 classes had an A,B,cspecificity score of 0,255,0, but 256 classes overflowed and had an A,B,cscore of 1,0,0. Suddenly our Bvalue became our Avalue. The Selectors Level 4 documentation completely irradiates that problem by stating that the limit can never be allowed to overflow. With this implementation, both255 and 256 classes would have the same A,B,cscore of 0,255,0.

早在 2012 年，大多数浏览器就实现了 255 的限制，但这个限制被允许溢出。255 个类别的A,B,c特异性得分为0,255,0，但 256 个类别溢出，A,B,c得分为1,0,0。突然，我们的B值变成了我们的A值。Selectors Level 4 文档通过声明永远不能允许限制溢出来彻底解决这个问题。有了这个实施，既255种256类将具有相同的A，B，C的评分0,255,0。

The problem given in Faust's answer has since been fixedin most modern browsers.

Faust 的回答中给出的问题已经在大多数现代浏览器中得到解决。

回答by Matt Fenwick

I am currently using the book CSS Mastery: Advanced Web Standards Solutions.

我目前正在使用这本书CSS Mastery: Advanced Web Standards Solutions。

Chapter 1, page 16 says:

第 1 章，第 16 页说：

To calculate how specific a rule is, each type of selector is assigned a numeric value. The specificity of a rule is then calculated by adding up the value of each of its selectors. Unfortunately, specificity is not calculated in base 10 but a high, unspecified, base number. This is to ensure that a highly specific selector, such as an ID selector, is never overridden by lots of less specific selectors, such as type selectors.

为了计算规则的具体程度，每种类型的选择器都被分配了一个数值。然后通过将每个选择器的值相加来计算规则的特殊性。不幸的是，特异性不是以 10 为基数计算的，而是一个高的、未指定的基数。这是为了确保高度特定的选择器（例如 ID 选择器）永远不会被许多不太特定的选择器（例如类型选择器）覆盖。

(emphasis mine) and

（强调我的）和

The specificity of a selector is broken down into four constituent levels: a, b, c, and d.

• if the style is an inline style, then a = 1
• b = the total number of id selectors
• c = the number of class, pseudo-class, and attribute selectors
• d = the number of type selectors and pseudo-element selectors

选择器的特异性分为四个组成级别：a、b、c 和 d。

• 如果样式是内联样式，则 a = 1
• b = id 选择器的总数
• c = 类、伪类和属性选择器的数量
• d = 类型选择器和伪元素选择器的数量

It goes on to say that you can often do the calculation in base-10, but only if all columns have values less than 10.

它接着说，您通常可以以 10 为基数进行计算，但前提是所有列的值都小于 10。

---

---

In your examples, ids are not worth 100 points; each is worth [0, 1, 0, 0]points. Therefore, one id beats 15 classes because [0, 1, 0, 0]is greater than [0, 0, 15, 0]in a high-base number system.

在您的示例中，id 不值 100 分；每一个都值得[0, 1, 0, 0]点。因此，一个 id 胜过 15 个类，因为[0, 1, 0, 0]它[0, 0, 15, 0]比高基数系统中的要大。

回答by rkarczmarczyk

I am fond of comparison of Specificity ranking to Olympic Games medal table (gold first method — based first on the number of gold medals, then silver and then bronze).

我喜欢将特异性排名与奥运会奖牌表进行比较（金牌优先法——首先基于金牌数，然后是银牌，然后是铜牌）。

It works also with your question (huge number of selectors in one specificity group). Specificity considered each group separately. In real world I've very rarely seen case with more than a dozen selectors).

它也适用于您的问题（一个特定组中有大量选择器）。分别考虑每个组的特异性。在现实世界中，我很少看到有十几个选择器的情况）。

There is also quite good specificity calculator available here. You can put your example (#a and .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o) there and see the results.

酒店还设有相当不错的特异性计算器这里。您可以将示例（#a 和 .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o）放在那里并查看结果。

Example of Rio 2016 Olympic Games medal table looks like

2016年里约奥运会奖牌表示例如下

回答by Matthew Wilson

I don't believe that the blog's explanation is correct. The specification is here:

我不相信博客的解释是正确的。规范在这里：

http://www.w3.org/TR/CSS2/cascade.html#specificity

http://www.w3.org/TR/CSS2/cascade.html#specificity

"Points" from a class selector can't add up to be more important than an "id" selector. It just doesn't work like that.

来自类选择器的“点”加起来不能比“id”选择器更重要。它只是不那样工作。

回答by Sphvn

I would say that:

我会这样说：

Element < Class < ID

I think they only stack into depending what you get if it is multiple of the same. So a Class will always overide the element and ID always over the Class but if it is down to which of 4 elements where 3 is to blue and 1 is to red it will be blue.

我认为如果它是相同的倍数，它们只会取决于你得到的东西。因此，类将始终覆盖元素和 ID 始终覆盖在类上，但如果它是 4 个元素中的哪一个，其中 3 为蓝色，1 为红色，则它将为蓝色。

For Example:

例如：

.a .b .c .d .e .f .g .h .i .j .k .l
{
color: red;
}

 .m .n .o
{
color blue;
}

Should turn out red.

应该变成红色。

See Example http://jsfiddle.net/RWFWq/

参见示例 http://jsfiddle.net/RWFWq/

"if 5things say red and 3 say blue well Ima go red"

“如果 5 件事情说红色，3 件事情说蓝色很好，我会变红”