web学习-css优先级计算规则

CSS选择器权值

 标签的权值为1，

类选择符的权值为10，

ID选择符的权值最高为100

例： p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

详解CSS优先级的读法，CSS优先级包含四个级别（文内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。

　　对优先级的读法，应该是以“组”来分，这个组之间相互独立，从左到右进行对比。它们成组出现，以逗号分隔。
　　selector( a , b , c , d )
　　compare: ↑ , ↑ , ↑ , ↑
　　selector( a , b , c , d )
　　正如w3c.org中原文所示，分为a,b,c,d四组，全为正整娄，默认为0，对应于不同的选择器结构和组成形式。在选择器之间的优先级进行对比时，从左到右1对1对比，当比出有大者时即可停止比较。
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0 , 0 , 2 , 1 */
/*compare ↑ , ↑ , √ */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0 , 0 , 1 , 1 */
/*compare ↑ , ↑ , ↑ , √ */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0 , 0 , 1 , 3 */
/*compare ↑ , ↑ , √ */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0 , 1 , 0 , 0 */
/*compare ↑ , √ */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1 , 0 , 0 , 0 */

　　(上表中，↑表示还要进行比较，√表示从此处已得到了结果)
　　再有，只要正确书写，仅从优先级中大概知道选择器结构形式了，如：
　　1,0,0,0表示是元素内的style；
　　0,2,1,1表示是一个由两个ID选择器，1个类或伪类或属性选择器，以及一个元素选择器组成的选择器。
　　CSS优先级规则的细节：
　　在纠正读法后，才能开始讲详细的规则：
　　a组数值只有把CSS写进style属性时才会为1,否则为0.写进style的样式声明其实不算是个选择器，所以这里面的b,c,d组值均为0，只有真正的选择器才会有b,c,d组值。
　　b组数值决定于ID选择器#ID，有多少个ID选择器，并会进行此组数值累加；
　　c组数值决定于类、伪类和属性选择符，并会进行该组数值累加；
　　d组数值决定于元素名，即元素选择器，并会进行该组数值累加；
　　注意，这四组数值分别对应于不同类型的选择器，互不影响，根据读法法则进行比较。
　　这里没有讨论到!important，就近原则和继承，也没有实例代码，欢迎大家来webjx.com共同讨论！
　　下面是列子：CSS优先级问题
　　CSS优先级包含四个级别（文内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。
　　CSS优先级的计算规则如下：
    * 页面中定义的样式,加1,0,0,0
    * 每个ID选择符(如 #id),加0,1,0,0
    * 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
    * 每个元素选择符（如p）或伪元素选择符(如 :firstchild)等，加0,0,0,1
　　然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值，
　　然后从左到右逐位比较大小，数字大的CSS样式的优先级就高。

搞清楚css优先级计算规则吧！

    特殊性

    css继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，浏览器不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程就称为层叠。——《css权威指南》

上面这句话有两个词需要稍作解释，“声明”和“特殊性”。如下图，css规则由选择器和声明块组成，写在选择器后面大括号里的就叫声明。

    实际上，同一个元素可以使用多个规则来指定它的字体颜色，每个规则都有自己的选择器。显然最终只有一个规则起作用（不可能一个字既是红色又是绿色），那么 该规则的特殊性最高，特殊性即css优先级。很多同学仅仅知道选择器优先级ID>class>元素选择器，而不知道ID的优先级为什么大于 class的优先级。那么css优先级到底是怎么计算的呢？

    选择器的特殊性值表述为4个部分，用0,0,0,0表示。

• ID选择器的特殊性值，加0,1,0,0。
• 类选择器、属性选择器或伪类，加0,0,1,0。
• 元素和伪元素，加0,0,0,1。
• 通配选择器*对特殊性没有贡献，即0,0,0,0。
• 最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

    例如：以下规则中选择器的特殊性分别是：   

 a{color: yellow;} /*特殊性值：0,0,0,1*/
 div a{color: green;} /*特殊性值：0,0,0,2*/
.demo a{color: black;} /*特殊性值：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
#demo a{color: orange;} /*特殊性值：0,1,0,1*/
div#demo a{color: red;} /*特殊性值：0,1,0,2*/

对照下面的demo，来验证上面几组规则的正确与否：

<a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div class="demo">
    <input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则，第4行优先级高-->
    <a href="">第三条应该是黑色</a><!--适用第2、3行规则，第3行优先级高-->
</div>
<div id="demo">
    <a href="">第四条应该是红色</a><!--适用第5、6行规则，第6行优先级高-->
</div>

显示效果：

    分析上面的demo，要注意特殊性是怎么排序的，上面第4行和第5行规则，第4行之所以优先级比第5行高，是因为第四行特殊性值最后面是1，而第5行特殊性值最后面是0。回过头来回答文章最开始的问题，为什么ID选择器的优先级比类选择器的优先级高？实际上是因为选择器特殊性值是从左向右排序的，特殊性值1,0,0,0大于以0开头的所有特殊性值，即便它是0,99,99,99，优先级依然比1,0,0,0要低。

    前面有讲到通配选择器*的特殊性值是0,0,0,0，而元素通过父元素继承过来的样式是没有特殊性值的，所以，通配选择器定义的规则优先级高于元素继承过来的规则的优先级。

    细心的同学应该已经发现了，特殊性值中的4个0中的第一个0是给谁暗箱操作内定了吗？是的！DOM中的行间样式送了点红包，于是它就牛了。行间样式的特殊性是1,0,0,0。行间样式的优先级比ID选择器优先级高。

 

    层叠

    假如特殊性相同的两条规则应用到同一个元素会怎样？css会先查看规则的权重（!important），加了权重的优先级最高，当权重相同的时候，会比较规则的特殊性，根据前面的优先级计算规则决定哪条规则起作用，当特殊性值也一样的时候，css规则会按顺序排序，后声明的规则优先级高，成为人生赢家，当上总经理出任CEO迎娶白富美。

 

css的优先级顺序（优先级逐级增加: 通用选择器*  元素(类型)选择器  类选择器  属性选择器  伪类   ID 选择器   内联样式）!important 规则是例外

 

当!important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪个位置. 尽管如此, !important规则还是与优先级毫无关系使用!important不是一个好习惯，因为它改变了你样式表本来的级联规则，从而难以调试。

 

 

 

一些不成文规则

 

• 不要在全站范围的css中使用!important.

• 只在需要覆盖全站范围的css或是外部css（例如引用的ExtJs或是YUI）的时候才在指定的页面上使用 !important。

• 不要在你的插件中使用!important。

• 永远都要优先考虑使用样式规则的优先级来解决问题而不是 !important。

 

    我们知道a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active，并 且这四个伪类如果对同一个元素设置同一个属性，那它们的声明顺序还有一定要求，一般大家都遵循“爱恨原则LVHA”（LoVe HAte），为什么是这个顺序？不能是其它顺序吗？

    根据css优先级计算规则，伪类的特殊性值是0,0,1,0，4个伪类的特殊性值相同，那么后面声明的规则优先级高。当鼠标滑过a链接时，满足:link 和:hover两个伪类，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；同理，当鼠标点击激活a链接时，同时满 足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link 和:hover之后。因此得出LVHA这个顺序。这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要 么没访问过，不可能同时满足，也就不存在覆盖的问题。