优先级是浏览器通过判断哪些元素值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。
优先级顺序
优先级逐级增加的选择器列表
- 通用选择器(*)
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- ID选择器
- 内联样式
!important规则例外
当!important规则被应用在一个样式声明中的时候,该样式声明会覆盖CSS中任何其他的声明,无论它处在声明列表中的哪里,尽管如此,!important规则还是与优先级毫无关系,使用!important不是一个好习惯,因为它改变了你样式表本来的级联规则,从而使其难以调试。
一些经验规则: - Always 要优化考虑使用样式规则的优先级来解决问题而不是!important
- Only只在需要覆盖全站或者外部CSS(例如引用的ExtJs或者YUI)的特定页面中使用!important
- Never永远不要在全站范围的CSS上使用!important
- Never 永远不要在你的插件中使用!important
权重计算
内联样式1000+id选择器100+类选择器10+元素选择器1
CSS优先级法则:
- A选择器都有一个权值,权值越大越优先;
- B当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
- C创作者的规则高于浏览者,即网页编写者设置的css样式的优先权高于浏览器所设置的样式;
- D继承的CSS样式不如后面指定的CSS样式;
- E在同一组属性设置中标有!important规则的优先级最大