【CSS】CSS选择器优先级及!important属性

  CSS的选择器是有权重的，当不同选择器的样式设置有冲突时，会采用权重高的选择器设置样式。权重（即优先级）的规则如下，权重越高，优先级越高：

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

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

•  行间样式，加1,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。

  选择器特殊性值是从左向右排序的，特殊性值1,0,0,0大于以0开头的所有特殊性值，即便它是0,99,99,99，优先级依然比1,0,0,0要低。

  很多人都知道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可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

  前面提到!important属性，!important是用来使IE6和IE7、IE8、火狐(Firefox)、google等浏览器做兼容的，但IE6不能执行!important。当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪个位置. 尽管如此, !important规则还是与优先级毫无关系.使用 !important不是一个好习惯，因为它改变了你样式表本来的级联规则，从而难以调试。

在使用!important时需要注意：

• Never 永远不要在全站范围的 css 上使用 !important
• Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者YUI ）的特定页面中使用  !important
• Never 永远不要在你的插件中使用 !important
• Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important

什么时候应该使用：

A) 一种情况

  你的网站上有一个设定了全站样式的CSS文件，同时你（或是你同事）写了一些效果通常都是很差的行内样式（行内样式的优先级是最高的）。在这种情况下，你就可以在你全局的CSS文件中写一些!important的样式来覆盖掉那些直接写在元素上的行内样式。

B) 另一种情况

[html] view plain copy

 print?

1. #someElement p {  
2.     color: blue;  
3. }  
4.   
5. p.awesome {  
6.     color: red;  
7. }  

  在外层有 #someElement 的情况下，你怎样能使 awesome 的段落变成红色呢？这种情况下，如果不使用!important，第一条规则永远比第二条的优先级更高。

怎样覆盖掉 !important：

很简单，你只需要再加一条!important 的CSS语句，将其应用到更高优先级的选择器（在原有基础上添加额外的标签、class或id选择器）上；或是保持选择器一样，但添加的位置需要在原有声明的后面（优先级相同的情况下，后边定义的会覆盖前边定义的）。

[html] view plain copy

 print?

1. #test.a{  
2.   color: red !important;     <!--尽管这条声明在前，但是仍会覆盖下边的样式-->  
3. }  
4. a{  
5.   color: green !important;  
6. }  

或：

[html] view plain copy

 print?

1. a{  
2.   color: green !important;  
3. }  
4. a{  
5.   color: red !important;     <!--同样的选择器，后边的声明会覆盖前边的-->  
6. }