CSS 的优先级机制总结
一、样式优先级：
多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使用多重样式的情况。
一般情况下，大家都认为优先级是：内联样式 > 内部样式 > 外联样式，实际上不是如此，内部样式和外联样式优先级一样（看谁在先后的问题）：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。如果内部样式放在外部样式的后面，则内部样式将覆盖外部样式。
二、选择器优先级
最高：内联样式 > id > class > 标签选择器
1. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1
5. 后代选择器则利用选择器的权值进行计算比较，示例如下：
<html> <head> <meta charset="utf-8"> <title>无标题页</title> <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>
三、CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 标有“!important”规则的优先级最大：当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明,，无论它处在声明列表中的哪个位置.。尽管如此， !important规则还是与优先级毫无关系，使用 !important不是一个好习惯，因为它改变了你样式表本来的级联规则，从而难以调试。
<style type="text/css"> #redP p{ /*两个color属性在同一组*/ color:#00f !important; /* 优先级最大 */ color:#f00; } </style>
怎样覆盖掉 !important：很简单，你只需要：
（1）再加一条!important 的CSS语句，将其应用到更高优先级的选择器（在原有基础上添加额外的标签、class或id选择器）上；
（2）或是保持选择器一样，但添加的位置需要在原有声明的后面（优先级相同的情况下，后边定义的会覆盖前边定义的）。
