点特殊性 [英] Points in CSS specificity

问题描述

研究特异性我偶然发现了这个博客 - 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：蓝色; 
} 
  

HTML： b

 < 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 =oid =a> 
这应该是蓝色的。 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

结果：

http://jsfiddle.net/hkqCF/

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

EDIT： / p>

所以显然这些点不只是总计，它们是连接的。有关详情，请参阅 - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars .html
BUT，这意味着我们的selector中的类= 0,0,15,0 OR 0 ，1,5,0 ？

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

解决方案

Pekka的回答实际上是正确的，而且可能是最好的解决问题的方法。

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

事实证明，非常大的基地（至少由4最多常用的浏览器 ^* ）来实现此标准算法是256或2 ⁸ 。

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

• 255个类 足以覆盖1个id


• ... but 256 classes are 够覆盖1个ID



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

  / li>
  

• ...但是，alas 256 ids是不是足以覆盖1个内置样式（更新2012/8/15 - 您必须使用！important ）

  / li>
  

所以有效地是一个点系统，但它不是基数10.它是基本256.这是它的工作原理： / p>

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

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

+（2 < sup>） ⁰ 或1，乘以选择器中的标签名数量

这对于back-of-

这可能是为什么关于这个话题的文章已经使用基数10。

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

/ strong>

正如Blazemonger今年早些时候指出的，webkit浏览器（chrome，safari）现在看起来使用比256更高的基数。也许2 ¹⁶ ，像Opera？ 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 surely the following CSS and HTML will result in the text being blue:

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>

RESULT:

http://jsfiddle.net/hkqCF/

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

EDIT:

So apparently the points aren’t just totalled, they’re concatenated. Read more about that here - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html BUT, does that mean that the classes in our selector = 0,0,15,0 OR0,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.

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