才子佳人博客

我的故事我讲述

CSS层叠样式表(Cascading Style Sheets)优先级简述
 
来源:xjh  编辑:xjh  2011-11-11

CSS样式定义多了,常常出现显示效果与预期不一致的情况。其中很大一部分原因在于起作用的样式的优先级。CSS规范为不同类型的选择器定义了特殊性权重,特殊性权重越高,样式会被优先应用。

什么是CSS优先级?

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。

CSS优先级规则

1、多个选择器可能会选择同一个元素,从上到下重要性降低:

!important的用户样式

!important的作者样式

作者样式

用户样式

浏览器定义的样式

2、CSS样式的权重

CSS规范为不同类型的选择器定义了权重,权重越高,样式会被优先应用。权重设定如下:

  1. 通配符,权重为0;
  2. html选择器、伪类,权重为1;
  3. 类选择器、属性选择器,权重为10;
  4. id选择器,权重为100;
  5. style属性:权重为1000;

即在html标签中直接使用style属性,这里的style属性如下:
#x34y {color:red}
<p id=x34y style="color:green"> 优先选择style=""设定的样式:color:green。

其他类型的,大家看看例子就明白了。

例如:
h1{color:blue} 权重为1
p em{color:yellow} 权重为2
.warning{color:red} 权重为10
p.note em.dark{color:grag} 权重为22
#main{color:black} 权重为100

单从上面这个例子来看,貌似不大好理解,下面再给出一张表:

选择符

权重

h1 {color:blue;} 1
p em {color:purple;} 1+1=2
.warning {color:red;} 10
p.bright {color:yellow;} 1+10=11
p.bright em.dark {color:brown;} 1+10+1+10=22
#id316 {color:yellow} 100

通过上面,就可以很简单的看出,HTML标记的权重是1,CLASS的权重是10,ID的权重是100,继承的权重为0(后面会讲到)。按这些规则将数字符串逐位相加,就得到最终的权重。

优先级问题其实就是一个冲突解决的问题,当同一个元素(内容)被CSS选择符选中时,就要按照优先级取舍不同的CSS规则。

这里还有一种情况:权重一样时如何处理?看看下面的就明白了。

3、CSS样式的层叠原则——后定义的样式覆盖先定义样式

当权重一样时,会采用“层叠原则” 后定义的会被优先应用。
如:p{color:yellow}

p{color:red}
作用到这里 <p>我的什么颜色呢?</p>
结果会是red的。

4、CSS样式的特殊标记——important 关键字声明

搞重要特权,如下即可
p {color:blue !important;}
加上!important;可将自己权重设为最高,但是切勿随便使用,避免产生不必要麻烦。


参考来源:
《CSS那些事儿》电子工业出版社 林小志
http://www.cnblogs.com/JosephLiu/archive/2010/02/17/1668886.html
http://www.blueidea.com/tech/web/2009/6801.asp(为您解读CSS优先级)
http://www.blueidea.com/tech/web/2009/6801_2.asp(CSS的继承性)


分类:网站设计| 查看评论
相关文章
文章点击排行
本年度文章点击排行
发表评论:
  • 昵称: *
  • 邮箱: *
  • 网址:
  • 评论:(最多100字)
  • 验证码: