CSS 特异性中的点是如何计算的
[英] How are the points in CSS specificity calculated
本文介绍了CSS 特异性中的点是如何计算的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
研究特异性我偶然发现了这个博客 - http://www.htmldog.com/guides/cssadvanced/specificity/
它指出特异性是 CSS 的一个评分系统.它告诉我们元素值 1 分，类值 10 分，ID 值 100 分.最重要的是，这些点是总计的，总数是该选择器的特异性.
例如:
<块引用>
身体 = 1 分
body .wrapper = 11 分
body .wrapper #container = 111 分
因此，使用这些要点，我希望以下 CSS 和 HTML 使文本变为蓝色:
#a {红色;}.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {颜色:蓝色；}
<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">
这应该是蓝色的.
当 15 个类等于 150 分而 1 个 ID 等于 100 分时，为什么文本是红色的?
显然，这些分数不只是总计；它们是串联的.在此处阅读更多相关信息 - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
这是否意味着我们选择器中的类 = 0,0,15,0 OR 0,1,5,0?
(我的直觉告诉我是前者，因为我们知道 ID 选择器的特殊性看起来像这样:0,1,0,0)
解决方案
Pekka 的回答实际em> 正确，而且可能是思考问题的最佳方式.
然而，正如许多人已经指出的那样，W3C CSS 建议指出连接三个数字 a-b-c(在具有大基数的数字系统中)给出了特殊性.";所以我这个极客只需要弄清楚这个基地有多大.
事实证明，非常大的基数"使用(至少 4 个最常用的浏览器*)来实现这个标准算法是 256 或 28.
这意味着使用 0 id 和 256 个类名指定的样式将覆盖仅使用 1 id 指定的样式.我用一些小提琴对此进行了测试:
因此，实际上有一个积分系统"，但它不是基数 10.它是基数 256.这是它的工作原理:
(28)2 或 65536，乘以选择器中 id 的数量
- (28)1 或 256，乘以选择器中类名的数量
- (28)0 或 1，乘以选择器中标签名的数量
这对于传达概念的粗略练习来说不太实用.
这可能就是有关该主题的文章一直使用 base 10 的原因.
***** [Opera 使用 216(参见 karlcow 的评论).其他一些选择器引擎使用 infinity——实际上没有积分系统(参见 Simon Sapin 的评论).]
更新，2014 年 7 月:
正如 Blazemonger 在今年早些时候指出的那样，webkit 浏览器(Chrome、Safari)现在似乎使用比 256 更高的基数.也许 216，像 Opera?IE 和 Firefox 仍然使用 256.
更新，2021 年 3 月:
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 28.
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:
So there is, effectively, a "point system," but it's not base 10. It's base 256. Here's how it works:
(28)2 or 65536, times the number of ids in the selector
- (28)1 or 256, times the number of class-names in the selector
- (28)0 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 216 (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 216, like Opera? IE and Firefox still use 256.
Update, March 2021:
Firefox no longer uses 256 as a base.
这篇关于CSS 特异性中的点是如何计算的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
