CSS 选择器权重值
CSS 具有自己的优先级计算方法，而不仅仅是行间>内部>外部、ID>class>元素
1. 样式类型
行间样式
| <h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1> |
内联样式
| <style type="text/css"> h1{font-size:12px; color:#000; }</style> |
外部样式
| <link rel="stylesheet" href="css/style.css"> |
2. 选择器类型
| 选择器 | 栗子 |
|---|---|
| ID | #id |
| class | .class |
| 标签 | p |
| 属性 | [type='text'] |
| 伪类 | :hover |
| 伪元素 | ::first-line |
| 相邻选择器、子代选择器 | > + |
3. 权重计算规则
4. 比较规则
1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。
无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。
在权重相同的情况下，后面的样式会覆盖掉前面的样式。
通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先，0 权值比无权值优先。
5. !important
!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。
| <style> p{color:red !important;}</style><p style="color:blue;">我显示红色</p> |
ie7+和别的浏览器对important的这种作用的支持度都很好。只有ie6-有些bug
| p{ color:red !important; color:blue; } //会显示blue |
