选择器的优先权

解释

1. 内联样式表的权值最高 1000;

2. ID 选择器的权值为 100

3. Class 类选择器的权值为 10

4. HTML 标签选择器的权值为 1

5. 继承样式的权值为0.1

权值越大,优先权越高

所以在选择器中尽可能详细地寻找所需要改变样式的元素,可以增加它的权值比重

比如

< class=”a”>
< class=”b”>
< class=”c”>

假设以上a-b-c为连续的继承关系,当我们要选择类 .c的时候,直接用 .c(类)选择器 它的权值只有10,但是如果用 .a .b .c来选择,则它的权值为10+10+10=30,那么则会选择后者的样式。

!important 规则例外

当在一个样式声明上使用 !important 规则时,该样式声明会覆盖CSS中任何其他的声明。当两条相互冲突的带有!important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。

尽管技术上 !important 与优先级毫无关系,但是它们之间直接相互影响。使用 !important 是一个坏习惯,应该尽量避免,因为这打断了样式表中的固有的级联规则,使得调试找bug变得更加困难。

一些经验法则

  • Never:永远不要在全站范围的 css 上使用 !important
  • Only:只在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用 !important
  • Never:永远不要在你的插件中使用 !important
  • Always:要优化考虑使用样式规则的优先级来解决问题而不是 !important