理解CSS选择器中权重值问题

CSS选择器可以分为好几种，除了基础的“*,#”等选择器以外，选择器还可以组合使用，如下表所示：

组合选择器

选择器

含义

示例

E,F

多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔

Div,p { color:#f00; }

E F

后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔

#nav li { display:inline; }

li a { font-weight:bold; }

E > F

子元素选择器，匹配所有E元素的子元素F

div > strong { color:#f00; }

E + F

毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

p + p { color:#f00; }

当选择器组合使用时，就会产生权重值的问题，一不小心，就会造成不小的麻烦。比如看下面这个例子：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title>CSS权重</title>
 5     <style type="text/css">
 6         #csstest {font-size:14px; color:Blue;}
 7         #csstest span{font-size:14px; color:Green;}
 8         .s1{color:Red;}
 9     </style>
10 </head>
11 <body>
12 <div id="csstest">WEB前端工程师需要掌握的技能有HTML,<span class="s1">CSS</span>和<span>Javascript</span></div>
13 </body>
14 </html>

效果：

本意是想让CSS文字应用到class为s1的红色文字样式上，可是怎么刷新都是绿色的文字，这是什么情况？

原因其实很简单，在CSS中每个选择器和HTML标签都有其自己的权重值，当不同的权重值的样式之间设置有冲突时，按照权重值高的样式来应用样式。如：HTML标签的权重值是1，类选择器的权重值是10，ID选择器的权重值是100。上述例子中#csstest span的样式权重值等于100+1=101，而s1的权重值只用10,所以应用的文字样式即为绿色，而不是红色。修改方法也很容易，在.s1的前面加入“#csstest”ID选择器就可以了。

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title>CSS权重</title>
 5     <style type="text/css">
 6         #csstest {font-size:14px; color:Blue;}
 7         #csstest span{font-size:14px; color:Green;}
 8         #csstest .s1{color:Red;}
 9     </style>
10 </head>
11 <body>
12 <div id="csstest">WEB前端工程师需要掌握的技能有HTML,<span class="s1">CSS</span>和<span>Javascript</span></div>
13 </body>
14 </html>

 

效果：

 

posted @ 2012-11-21 19:08  SunandSing  阅读(545)  评论(0)    收藏  举报