点的CSS特异性
研究的特殊性我偶然发现了这个博客 – http://www.htmldog.com/guides/cssadvanced/specificity/
它指出，特异性是CSS的点评分系统。 它告诉我们元素值1点，类值10点，ID值100点。 也就是说，这些分数是总计的，总量就是select者的特异性。
例如：
身体 = 1分
身体.wrapper = 11分
身体.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个class等于150个点，而1个ID等于100个点时，这个文本是红色的？
编辑：
所以显然这些点不仅仅是总计，而是连接在一起。 阅读更多关于这里 – http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html但是，这是否意味着我们的select器= 0,0,15,0或0,1,5,0 ？
我的直觉告诉我这是前者，因为我们知道IDselect器的特异性如下所示： 0,1,0,0
佩卡的答案 实际上是正确的，也许是考虑这个问题的最好方法。
然而，正如很多人已经指出的那样，W3C CSS的build议指出“连接三个数字abc（在一个大基数的数字系统中）给出了特殊性”。 所以我的怪胎只是要弄清楚这个基地有多大。
事实certificate，使用这个标准algorithm的“非常大型的基础”（至less是4个最常用的浏览器* ）是256或者2 8 。
这意味着一个由0个id和256个类名指定的样式将覆盖只有一个id指定的样式。 我用一些小提琴testing了这个：
- 255个类不足以覆盖1个ID
- …但是256个类足以覆盖1个ID
-
…和256个标签名称足以覆盖1个类名称
-
…但是，可惜的是，256个ID不足以覆盖1个内联样式 （更新2012/8/15 – 您将不得不使用
!important）
所以实际上有一个“点系统”，但它不是以10为基数的。它是基数为256的。下面是它的工作原理：
（2 8 ） 2或65536，乘以select器中的ID号码
+（2 8 ） 1或256，乘以select器中的类名称数
+（2 8 ） 0或1，乘以select器中标签名称的数量
这对于传递这个概念的信封回放练习并不是很实用。
这可能就是为什么这个话题的文章一直在使用base 10。
***** [Opera使用2 16 （请参阅karlcow的评论）。 其他一些select引擎使用无穷大 – 实际上没有分数系统（参见Simon Sapin的评论）。]
更新date：2014年7月：
正如Blazemonger在今年早些时候指出的那样，webkit浏览器（chrome，safari）现在似乎使用了比256更高的基础。 IE和Firefox仍然使用256。
好问题。
我无法确定 – 我设法find的所有文章都避免了多个类的例子，例如这里 – 但是我认为，当比较类select器和ID之间的特定性时 ，类将被计算出来只有15价值，不pipe它有多详细。
这匹配我的经验如何特异性的行为。
但是， 必须有一些堆叠的类，因为
.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o
比…更具体
.o
我唯一的解释是叠加类的特殊性只能针对对方而不针对ID进行计算。
更新 ：我现在中途得到它。 这不是一个积分制度，有关15分制课程的信息是不正确的。 这是一个四部分的编号系统， 在这里很好的解释。
起点是4位数字：
style id class element 0, 0, 0, 0
根据W3C关于特异性的解释 ，上述规则的具体数值是：
#a 0,1,0,0 = 100 classes 0,0,15,0 = ... see the comments
这是一个非常大的（未定义的）基数的编号系统。
我的理解是，因为基数非常大，所以第4列中的数字不能超过第3列中的数字> 0，第2列第1列中的数字相同。这是正确的吗？
我会感兴趣的是，对math的掌握比我更好的人可以解释编号系统，当单个元素大于9时，如何将其转换为十进制。
我目前正在使用CSS Mastery：高级Web标准解决scheme 。
第1章第16页说：
要计算规则的具体含义，请为每种select器分配一个数值。 然后通过加总每个select器的值来计算规则的特异性。 遗憾的是，特异性不是以10为底，而是以非特定的高基数计算。 这是为了确保一个非常具体的select器，比如一个IDselect器，不会被许多不太特定的select器（比如typesselect器）覆盖。
（强调我的）和
select器的特殊性被分解为四个组成级别：a，b，c和d。
- 如果样式是内联样式，则a = 1
- b = idselect器的总数
- c =类，伪类和属性select器的数量
- d =typesselect器和伪元素select器的数量
它继续说，你可以经常进行以10为基础的计算，但是只有当所有列的值都小于10时。
在你的例子中，ID不值100分， 每个都值[0, 1, 0, 0]分。 因此，一个id跳过15个类，因为在高基数系统中[0, 0, 15, 0] [0, 1, 0, 0]大于[0, 0, 15, 0] 。
目前的select器4级工作草案在描述CSS中的特定性方面做得很好：
通过比较三个组分的特异性来比较特异性：具有较大A值的特异性更具体; 如果两个A值相关，那么具有较大B值的特异性更具体; 如果两个B值也相关，那么具有较大c值的特异性更具体; 如果所有的值都绑定，那么这两个特性是相等的。
这意味着值A，B和C是完全独立的。
15个class级没有给你的select者一个150的特异性分数，它给了它一个B值15.一个单一的A值足以压倒这个。
作为一个比喻，设想一个家庭的1个父母，1个父母和1个孩子。 这可以表示为1,1,1 。 如果父母有15个孩子，那不会突然使他们成为另一个父母（ 1,2,0 ）。 这意味着父母的责任远远超过一个孩子（ 1,1,15 ）。 ;）
同样的文件也继续说：
由于存储限制，实现可能对A ， B或c的大小有限制。 如果是这样，则高于极限的值必须被限制到该极限，而不是溢出。
这已被添加到解决浮士德的答案中提出的问题 ，从而在2012年的CSS实现允许特异性值溢出到彼此。
早在2012年，大多数浏览器实现了255的限制，但是这个限制被允许溢出。 255个类别的A，B，c特异性得分为0,255,0 ，但有256个类别溢出并具有1,0,0的A，B，c得分。 突然之间，我们的B值成了我们的A值。 select器4级文档通过说明永远不允许溢出限制完全照射该问题。 通过这个实现，255和256类将具有相同的A，B，C得分0,255,0 。
在大多数现代浏览器中，Faust的答案中给出的问题已经被固定 。
我不相信博客的解释是正确的。 规格如下：
http://www.w3.org/TR/CSS2/cascade.html#specificity
类select器中的“点”不能比“id”select器更重要。 它只是不这样工作。
我喜欢比较特殊性排名到奥运奖牌表（金牌第一的方法 – 首先是金牌数量，然后是银牌，然后是铜牌）。
它也适用于你的问题（在一个特定组中有大量的select器）。 特异性分别考虑了每个组。 在现实世界中，我很less见过十几个select器）。
这里也有相当不错的特异性计算器。 你可以把你的例子（#a和.a .b .c .d .e .f .g .h.i.j.k.l.m.n .o）放在那里，看看结果。
里约2016年奥运会奖牌榜样例 
我会这样说：
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; }
应该变成红色。
请参阅示例http://jsfiddle.net/RWFWq/
“如果五月说红，三说蓝井伊马红”
