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

问题描述

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

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

例如：

body = 1点

body .wrapper = 11点

body .wrapper #container = 111点

因此，使用这些要点，我期望以下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>这应该是蓝色的。 < / 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 或 0,1,5,0 ？

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

解决方案

Pekka的答案 实际上是正确的，并且可能是思考的最佳方法问题。

但是，正如许多人已经指出的那样，W3C CSS建议指出：将三个数字abc（在基数较大的数字系统中）串联在一起特异性。因此，我内心的极客只需要弄清楚这个基数是多少。

事实证明，使用了非常大的基数（至少按4个基数实现此标准算法的常用浏览器 ^* ）为256或2 ⁸ 。

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

• 255个类不足以覆盖1个ID


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



• ...和256个标记名 足以覆盖1个类名




• ...但是，可惜256个ID 不是足以覆盖1种内联样式（2012年8月15日更新-您必须使用！important ）

因此，有效地存在一个点数系统，但它不是以10为底的。它是以256为底的。它是这样工作的： / p>

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

+（2 ⁸ ） ¹ 或256，乘以选择中类名的数量或

+（2 ⁸ ） ⁰ 或1乘以选择器中标记名的数量

这对于进行信封式练习传达概念并不十分实用。

这可能是关于该主题的文章一直使用10进制的原因。

***** [Opera使用2 ¹⁶ （请参阅karlcow的评论）。其他一些选择器引擎使用 infinity -实际上是无分制（请参见Simon Sapin的评论）。]

更新，2014年7月：

正如Blazemonger在今年早些时候指出的那样，webkit浏览器（chrome，safari）现在使用的基数大于256。也许像Opera一样2 ¹⁶ ？ IE和Firefox仍使用256。

Researching specificity I stumbled upon this blog - 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.

For example:

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

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>

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

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

Does that mean that the classes in our selector = 0,0,15,0 OR 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)

解决方案

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

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.

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

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 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 (Updated 2012/8/15 -- you'll have to use !important)

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

(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

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 uses 2¹⁶ (see karlcow’s comment). Some other selector engines use infinity — effectively no points system (see Simon Sapin’s comment).]

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.

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