CSS优先级、继承

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

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