概念
浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级基于由各种选择器组成的匹配规则。
样式的优先级
多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。
一般情况下，优先级如下：
（外部样式） <（内部样式） <（内联样式）
有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
选择器的优先权
Paste_Image.png
解释：
- 内联样式表的权值最高 1000；
- ID 选择器的权值为 100
- Class 类选择器的权值为 10
- HTML 标签选择器的权值为 1
<html>
<head>
<style type="text/css">
#redP p {
/* 权值 = 100+1=101 /
color:#F00; / 红色 /
}
#redP .red em {
/ 权值 = 100+10+1=111 /
color:#00F; / 蓝色 /
}
#redP p span em {
/ 权值 = 100+1+1+1=103 /
color:#FF0;/黄色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>
最后结果为：
Paste_Image.png
优先级法则
- 选择器都有一个权值，权值越大越优先；
- 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
- 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
- 继承的CSS 样式不如后来指定的CSS 样式；
- 在同一组属性设置中标有
!important规则的优先级最大
修改样式
<style type="text/css">
#redP p {
/* 权值 = 100+1=101 */
color:#F00;
}
#redP .red em {
/* 权值 = 100+10+1=111 */
color:#00F;
}
#redP p span em {
/* 权值 = 100+1+1+1=103 */
color:#FF0 !important;
}
</style>
则结果为：
Paste_Image.png
!important
当在一个样式声明上使用 !important 规则时，该样式声明会覆盖CSS中任何其他的声明。使用 !important 是一个坏习惯，应该尽量避免，因为这打断了样式表中的固有的级联规则。当两条相互冲突的带有!important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
一些经验法则：
- Never 永远不要在全站范围的 css 上使用 !important
- Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
- Never 永远不要在你的插件中使用 !important
- Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
取而代之，你可以：
- 善用 CSS 的级联属性
使用更多具体的规则。比如在你需要选定的对象元素前加上更多的元素，使选择的范围缩小，你的选择器就变得更有针对性，从而提高优先级：
<div id="test"> <span>Text</span></div>
#test span { color: green }span { color: red }div span { color: blue }
无论你css语句的顺序是什么样的，文本都会是绿色的(green)，因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色(blue)的规则都会覆盖红色(red)的规则）
怎样覆盖掉 !important
- 再加一条 !important的CSS语句，将其应用到更高优先级的选择器（在原有基础上添加额外的标签、类或 ID 选择器）上
- 保持选择器一样，但添加的位置需要在原有声明的后面（优先级相同的情况下，后边定义的会覆盖前边定义的）。
- 使用相同的选择器，但是置于已有的样式之后
网友评论