首先CSS优先级
转载自 http://www.cnblogs.com/ShepherdIsland/archive/2010/03/25/1694773.html
-
首先CSS优先级
| 选择符 |
特征值 |
| 继承的样式 |
应该是负值 |
| *和默认样式 |
0 |
| h1 {color:blue;}——HTML标记 |
1 |
| p em {color:purple;}——两个HTML标记 |
1+1=2 |
| .apple {color:red;}——CLASS |
10 |
| p.bright {color:yellow;}——一个HTML和一个CLASS |
1+10=11 |
| p.bright em.dark {color:brown;}——很多~ |
1+11+1+11=22 |
| #id316 {color:yellow}——ID |
100 |
大概就是这样计算的吧，很多是自己的理解，还有没验证的。
-
关于继承
不被继承的属性：border, margin, padding, background……（发现继续添加）
-
还是优先级
1.文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style="color:red">blah</div>的样式。
2. 每个ID选择符(#someid)，加 0,1,0,0。
3. 每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。
4. 每个元素或伪元素(:firstchild)等，加0,0,0,1。
5. 其它选择符包孕全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释 。
-
其他
1. 有!important声明的规矩高于一切。
2. 如果!important声明冲突，则对比优先权。
3. 如果优先权一样，则遵守在源码中出现的顺序 抉择，后来者居上。
4. 由继承而得到的样式没有specificity的盘算，它低于一切其它规矩 (比如全局选择符*定义的规矩 )。
5. 关于经由@import加载的外部样式，由于@import必须 出现在所有其它规矩定义之前(如不是，则涉猎器该当漠视 之)，所以遵守后来居上原则，一般优先权冲突时是占下风的。
6.还需要 说一下，IE是可以辨认地位差错的@import的，但无论@import在什么处所，它都觉得是位于所有其它规矩定义之前的，这可能会引发一些误会 。
- 总结：优先权问题看起来简略，但背后还是有非常繁杂的机制，在实际利用中需要多留神。