[程序猿入行必备]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;”。