Question

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

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

例如：

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

因此，使用这些点肯定会使以下CSS和HTML导致文本为蓝色：

CSS：

#a {
    color: red;
}

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

HTML：

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

结果：

http://jsfiddle.net/hkqCF/

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

修改

显然，这些要点不仅仅是总和，它们是连在一起的。在此处详细了解相关内容 - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html 但是，这是否意味着我们的选择器中的类= 0,0,15,0或0,1,5,0？

我的直觉告诉我这是前者，因为我们知道ID选择器的特异性如下：0,1,0,0

Answer 1

Pekka's answer 几乎正确，可能是思考问题的最佳方式。

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

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

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

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，乘以选择器中的ids数量
+（2 ⁸）¹或256，乘以选择器中的类名数量 +（2 ⁸）⁰或者是选择器中标记名称数的1倍

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

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

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

Answer 2

好问题。

我无法确定 - 我设法找到的所有文章都避免了多个类的例子，例如： here - 但我认为，在比较类选择器和ID 之间的特定时，只能使用值15来计算类，无论如何详细说明。

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

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

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

比
更具体
.o

我唯一的解释是，堆叠类的特殊性只是相互计算，而不是针对ID。

更新：我现在中途了。它不是分数系统，关于15分的类的信息是不正确的。这是一个由4部分编号的系统，很好地解释了here。

起点是4位数字：

style id class element 0, 0, 0, 0

根据W3C explanation on specificity，上述规则的具体值为：

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

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

我的理解是因为基数非常大，第4列中的数字不能超过数字>第3列为0，第2列第1列相同....这是正确的吗？

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

Answer 3

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

第1章，第16页说：

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

（强调我的）和

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


如果样式是内联样式，则a = 1

b = id选择器的总数

c =类，伪类和属性选择器的数量

d =类型选择器和伪元素选择器的数量

接着说你经常可以在base-10中进行计算，但前提是所有列的值都小于10。

在你的例子中，id不值100分;每个都值[0, 1, 0, 0]分。因此，一个id击败了15个类，因为[0, 1, 0, 0]在高基数系统中大于[0, 0, 15, 0]。

Answer 4

当前Selectors Level 4 Working Draft在描述CSS中的特异性方面做得很好：

通过按顺序比较三个组成部分来比较特异性：具有较大 A 值的特异性更具体;如果两个 A 值相关联，则具有较大 B 值的特异性更具体;如果两个 B 值也相关联，则具有较大 c 值的特异性更具体;如果所有值都绑定，则两个特征相等。

这意味着值A，B和C完全相互独立。

15个类没有给你的选择器一个150的特异性得分，它给它的 B 值为15.单个 A 值足以压倒一切此

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

同样的文件还要说：

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

这已被添加以解决Faust's answer中提出的问题，其中2012年的CSS实现允许特异性值相互溢出。

早在2012年，大多数浏览器都实现了255的限制，但允许此限制溢出。 255个类的 A，B，c 特异性得分 0,255,0 ，但256个类溢出并且 A，B，c 得分of 1,0,0 。突然，我们的 B 值成为我们的 A 值。 Selectors Level 4文档通过声明永远不允许溢出来完全解决该问题。通过此实现，两个 255和256个类将具有相同的 A，B，c 得分 0,255,0 。

在大多数现代浏览器中，Faust的答案中提出的问题已经修复。

Answer 5

我喜欢比较特殊性排名与奥运会奖牌榜（金牌第一种方法 - 首先根据金牌数量，然后是银牌，然后是铜牌）。

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

还有非常好的特异性计算器here。你可以把你的例子（#a和.a .b .c .d .e .f .g .h .i .j .k .l .m .n。）放在那里看看结果。

2016年里约奥运会奖牌榜的例子

Answer 6

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

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

类选择器中的“点”不能比“id”选择器更重要。它只是不起作用。

Answer 7

我会说：

Element < Class < ID

我认为如果它是多个相同的，它们只会依赖于你得到的东西。所以一个Class总是会覆盖整个Class上的元素和ID，但是如果它归结为4个元素中的哪一个，其中3是蓝色，1是红色，那么它将是蓝色。

例如：

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

 .m .n .o
{
color blue;
}

应该变成红色。

请参阅Example http://jsfiddle.net/RWFWq/

“如果5号说红色，3个说蓝色好，那么会变红”

CSS特异性的要点

7 个答案: