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

[程序员入行必备]CSS样式之优先级,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。