CSS：CSS样式表及选择器优先级总结
我们在写网页的时候经常会遇到同一个HTML文件，使用了外部样式、内部样式以及内联样式，那么如果发生冲突时浏览器是怎么抉择的呢？
也会遇到这样的情况，在样式表中，对同一个HTML元素，我们有可能既用到了class，又用到了id，还有继承自父元素的样式，那么如果发生冲突时浏览器又怎么表现呢？
1、样式表的优先级
所谓多重样式，指的是对于相同的HTML元素在三种样式表中都存在样式效果的时候的样式覆盖问题。对于多重样式，也就是三种样式表都存在的情况下，一般来说它们的优先级是：
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
但是会有一种情况是，如果外部样式表的引入位置在内部样式的后面，也即外部样式表更接近HTML元素，那么外部样式表中的样式会覆盖内部样式表中相同元素的样式。也就是说，如果是对相同的的HTML元素进行样式编辑，在HTML文档流中距离HTML元素近的会覆盖距离HTML元素远的。
1 <head> 2 <style type="text/css"> 3 /* 内部样式 */ 4 h1{color:green;} 5 </style> 6 7 <!-- 外部样式 style.css --> 8 <link rel="stylesheet" type="text/css" href="style.css"/> 9 <!-- 设置：h1{color:blue;} --> 10 </head> 11 <body> 12 <h1>Test</p> 13 </body>
上面代码中，Test会显示为蓝色。若将外部样式和内部样式交换位置，则Test将显示为绿色。
确定了样式表的优先级之后，也就是确定了使用那个样式表中的样式之后，还有一个问题，就是，如果在同一个样式表中，对同一个HTML元素，分别用其id、class、tagName定义了样式，且样式还不相同，那么浏览器会怎么选择呢？这就是接下来要说的选择器的优先级。
2、选择器的优先级
Css选择器优先级计算规则：
根据Css选择器的类型，可以计算出这个样式有多大的优先级：
|
选择器类型 |
计算规则 |
|
元素标签中定义的样式（Style属性） |
加1,0,0,0 |
|
每个ID选择符(如 #id) |
加0,1,0,0 |
|
每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover) |
加0,0,1,0 |
|
每个元素选择符（如p）或伪元素选择符(如 :firstchild)等 |
加0,0,0,1 |
|
其它选择符包括全局选择符*，不过这也是一种specificity。 |
加0,0,0,0，相当于没加 |
然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值，从左到右逐位比较大小，数字大的CSS样式的优先级就高。
有些人直接就说，内联的加1000，id的加100，class的加10， tag的加1，虽然在结果上是一致的，但是这种说法还是不够有说服力的。
这里需要注意几点：
- !important声明的样式优先级最高，如果冲突再进行计算。
- 如果优先级相同，则选择最后出现的样式。
- 继承得到的样式的优先级最低。
为了更好的理解这些计算规则，举些例子如下：
|
选择器 |
计算结果 |
|
* { } |
0 |
|
li { } |
1 (one element) |
|
li:first-line { } |
2 (one element, one pseudo-element) |
|
ul li { } |
2 (two elements) |
|
ul ol+li { } |
3 (three elements) |
|
div + *[rel=up] { } |
1,1 (one attribute, one element) |
|
ul ol li.red { } |
1,3 (one class, three elements) |
|
li.red.level { } |
2,1 (two classes, one element) |
|
style=”” |
1,0,0,0 (one inline styling) |
|
h1 { } |
1 (one HTML selector) |
|
div p { } |
2 (two HTML selectors) |
|
.hi |
1,0 (one class selector) |
|
div p.hi { } |
1,2 (two HTML selectors and a class selector) |
|
#hi |
1,0,0 (one id selector) |
|
body #darkside .sith p { } |
1,1,2 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1) |
祝愿大家可以在Css的路上一路披荆斩棘。生活，就当如Css一样，绚丽绽放、五彩缤纷。
参考资料：http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html
