【分享】说说标准——关于样式的特殊性

WebAdvocate 2010-06-30 03:51:16
加精
本文简单的介绍下何为选择器的特殊性,它是起什么作用的,以及特殊性怎么计算方面的知识。

所谓的特殊性是指,作用于同一元素的同一特性 (property)的不同选择器的多个值,哪个会起作用,特殊性值最高的会起作用。比如,如下代码中,多个样式中的 'background-color' 同时作用于同一个 DIV 元素,那么最后,到底 DIV 应该会是什么颜色呢?

<!DOCTYPE HTML>
<style type="text/css">
div {
width: 100px;
height: 100px;
}

#c1 #c2 div.con {
background-color: yellow;
}

div {
background-color: black;
}

#c2 div {
background-color: blue;
}

#c2 #content {
background-color: red;
}
</style>
<div id="c1">
<div id="c2">
<div id="content" class="con"></div>
</div>
</div>


我们先来看一下特殊性的计算规则。

特殊性的值可以看作是一个由四个数组成的一个组合,用a,b,c,d来表示它的四个位置。依次比较a,b,c,d这个四个数比较其特殊性的大小。比如,a值相同,那么b值大的组合特殊性会较大,以此类推。注意,W3C中并不是把它作为一个4位数来看待的。

下面说明,a,b,c,d都是怎么确定的:
1. 如果 HTML 标签的 'style' 属性中该样式存在,则记 a 为 1;
2. 数一下选择器中 ID 选择器的个数作为 b 的值,比如,以上的 '#c1' 和 '#c2'都算;
3. 其他属性 以及 伪类(pseudo-classes)的总数量是 c 的值,比如,上面例子中的'.con',':hover'等;
4. 元素名和伪元素的数量是 d 的值;比如上面例子中的 ‘div’。

W3C官方给出的例子:
 *             {}  /* 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 */

<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>



现在,让我们回到一开始的例子,计算下各个样式的特殊性的值:
<!DOCTYPE HTML>
<style type="text/css">
div {
width: 100px;
height: 100px;
}

#c1 #c2 div.con { /* a=0 b=2 c=1 d=1 -> specificity = 0,2,1,1 */
background-color: yellow;
}

div { /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
background-color: black;
}

#c2 div { /* a=0 b=1 c=0 d=1 -> specificity = 0,1,0,1 */
background-color: blue;
}

#c2 #content { /* a=0 b=2 c=0 d=0 -> specificity = 0,2,0,0 */
background-color: red;
}
</style>
<div id="c1">
<div id="c2">
<div id="content" class="con"></div>
</div>
</div>


可见,‘#c1 #c2 div.con ’的特殊性最高,是[0,2,1,1],那么背景色应该是黄色才对。打开浏览器测试一下,发现,果然是黄色,很神奇吧:)

关于特殊性的计算具体细节,请参考W3C CSS2.1 6.4.3 Calculating a selector's specificity
...全文
3041 93 打赏 收藏 举报
写回复
93 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
zhufangya 2012-05-24
学习了谢谢楼主
  • 打赏
  • 举报
回复
gawkingdotnet520 2010-09-17
还得靠记忆里啊
  • 打赏
  • 举报
回复
F2ECalm 2010-09-15
膜拜啊。
  • 打赏
  • 举报
回复
cl18850511 2010-08-12
继承来的 特殊性怎么算?
  • 打赏
  • 举报
回复
zaozao0603 2010-08-12
原来还有这样的道理在里面,感谢~~
  • 打赏
  • 举报
回复
zhangleifly 2010-07-20
楼主英文很好吧?都是通过css官方网站学习的?都是啃的英文?佩服啊~
  • 打赏
  • 举报
回复
2010-07-15
  • 打赏
  • 举报
回复
lihuaxia12304 2010-07-12
顶一下
  • 打赏
  • 举报
回复
skyaspnet 2010-07-07
学习。。
  • 打赏
  • 举报
回复
bahuyushgozh 2010-07-06
书书书~~~~ 分分分~~~
  • 打赏
  • 举报
回复
luzhen328 2010-07-05
看看看看
  • 打赏
  • 举报
回复
xiuyouxu 2010-07-05
新手,学习
  • 打赏
  • 举报
回复
myangel_2 2010-07-05
学习一下~~~~~~
  • 打赏
  • 举报
回复
hhsyp3 2010-07-04
顶下挣点积分!
  • 打赏
  • 举报
回复
mehere8 2010-07-04
对 不同的selector比重不一样 好像是id(100)>class(10)>tag name(1) !important又比其他的优先
  • 打赏
  • 举报
回复
bankvg 2010-07-04
要学习!
  • 打赏
  • 举报
回复
lwlongyan 2010-07-03
学习学习
  • 打赏
  • 举报
回复
zlcj1 2010-07-03
不过楼主写这么多还是很辛苦的啦。顶一下~~
  • 打赏
  • 举报
回复
skyaspnet 2010-07-03
看看。。。
  • 打赏
  • 举报
回复
qq1013921985 2010-07-02
楼主打字速度很快啊 转眼间3篇大作完成
  • 打赏
  • 举报
回复
加载更多回复(65)
相关推荐
发帖
跨浏览器开发

5005

社区成员

解读Web 标准、分析和讨论实际问题、推动网络标准化发展和跨浏览器开发进程,解决各种兼容性问题。
社区管理员
  • 跨浏览器开发社区
加入社区
帖子事件
创建了帖子
2010-06-30 03:51
社区公告
暂无公告