[程序员入行必备]CSS样式之优先级

专业玩家请移步：http://www.w3.org/TR/CSS2/cascade.html

使用CSS控制页面样式时，经常出现设定的样式被“覆盖”，不能生效的情况。

浏览器是依据怎样的优先次序判断CSS样式的优先级的呢？

总结如下：

样式的来源

样式有多处来源，有网页开发作者设定的、有浏览器默认的、还有网页用户设定的。各种样式声明逐层叠加，或继承、或覆盖、或叠加计算，影响元素的展现效果。

样式的来源依次有：

1、浏览器默认样式；

2、用户样式；

3、作者链接样式；

4、作者页内嵌入样式（这个要尽量少用）；

5、作者行内样式（这个不是好习惯，要戒掉）。

按来源次序，优先级越来越高。

选择器的特殊性

CSS提供各种选择器，可以通过标签、CSS类或ID选定元素。

选定元素的方式不同，优先级也不同。

特殊性按四个维度数计算，设为a、b、c、d，从a到d逐个比较，前面维度的优先级胜出，后面的就不用比了。

四个维度指的是：

a——行内样式；

b——通过id指定；

c——通过类或属性指定；

d——通过标签或伪类指定。

比较方法就是数个数。

举例如下（官方例子）：

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

例子中，特殊性自上而下逐次增大。

如果这些选择器都指到同一个元素上，设定的同一个属性，选择特殊性大的样式生效。

如果不幸平局，后声明的生效。

优先原则

优先原则即层叠原则是“层叠样式表”的核心机制，也是CSS名称的由来。

优先原则包括三条：

1、先看特殊性；

2、再看规则来源；

3、直接设定的大于继承来的（特殊性再高，如果只是选择了父元素，或祖先元素，那直接对当前元素的设定生效）。

最后，永远不要用“!important;”。