CSS优先级
CSS优先级包含四个级别
- 标签内定义样式
- ID选择符
- Class选择符
- 元素选择符
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样式的优先级就高。
注意
- !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) |
| h1 + *[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) |
| p { } | 1 (one HTML selector) |
| div p { } | 2 (two HTML selectors) |
| .sith | 1,0 (one class selector) |
| div p.sith { } | 1,2 (two HTML selectors and a class selector) |
| #sith | 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) |
IE6 链接优先级Bug
正常计算结果：
a:hover = div .yellowLink = a.yellowLink a:visited = div .yellowLink = a.yellowLink
IE6计算结果：
a:hover > div .yellowLink a:hover > a.yellowLink a:visited > div .yellowLink a:visited > a.yellowLink
- 在IE6里面，a:hover的优先级比div.greenLink a高。并且，同样的结论在:visited和:active里面也有。
- 在IE6里面，“.orange_link .orange_link a”的优先级和“a:hover”一样高
- IE6里，“.orange_link .orange_link .orange_link a”(三个class)的优先级比“a:hover”要高
- IE6中，“a#blue_link”或是“#blue_link”的优先级比a:hover要高
- 以上的结论在:visited和:active也成立，但是:link没有这样的bug。另外IE7和IE8beta1没有这个bug。
解决办法：不给a定义伪类颜色（这种解决方案在“用户可用性”上并不好）；或使用#id重置过来。
以上结论记不住也就算了，知道IE6中存在这个Bug就可以了。
