CSS样式的优先级

概念

浏览器通过优先级来判断哪一些属性值与一个元素最为相关从而在该元素上应用这些属性值
当优先级与多个CSS声明中任意一个声明的优先级相等的时候,最后一个声明会应用在元素上,这就是CSS样式的优先级

要注意的是元素在文档中的位置并不会影响到优先级

CSS样式的优先级逐渐增加的顺序

1. 通用选择器 *
2. 元素选择器 p
3. 类选择器 .class
4. 属性选择器 [type='sometype']
5. 伪类选择器 a:hover
6. ID选择器 #id
7. 内联样式 style='style_type'

!important 规则

当一个样式声明上使用 !important 规则，可以覆盖CSS样式中的任何其他的声明。使用!important 是一个坏习惯，应该尽量避免，因为这会打断样式表固有联级规则，使得调试变得更加困难。

当两条互相冲突的!important规则声明被应用到同一个相同的元素的时候,拥有更大优先级的声明会被调用

网上给的经验法则

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

你可以:

1. 善用CSS的级联属性
2. 使用更多具体的规则，使选择的范围缩小，这样的选择器会更具有针对性，从而提高优先级

小例子：

<div id="test">
    <span>Text</span>
</div>

#test span{color:green}
div span{color:blue}
span{color:red}

无论顺序如何，最后文本的颜色都会是green的。blue总会覆盖掉red，再被green覆盖掉，因为他们的优先级顺序从上到下递减