首先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在什么处所，它都觉得是位于所有其它规矩定义之前的，这可能会引发一些误会 。

• 总结：优先权问题看起来简略，但背后还是有非常繁杂的机制，在实际利用中需要多留神。