Test1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
#box1 .spec2 p{
color:red;
}
div div #box3 p{
color:blue;
}
div.spec1 div.spec2 div.spec3 p{
color:green;
}
</style>
</head>
<body>
<div id="box1" class="spec1">
<div id="box2" class="spec2">
<div id="box3" class="spec3">
<p>文字</p>
</div>
</div>
</div>
</body>
</html>
ask 文字的颜色是什么?
首先看他们选中了没,可见他们都选中了<p>
,这时就要比较权重,
第一行选择器权重是1,1,1
第二行选择器权重是1,0,3
第三行选择器权重是0,3,4
综上比较可知,是听第一行选择器的话,即红色。
Test2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div p{
color:red;
}
#box{
color:blue;
}
</style>
</head>
<body>
<div id="box">
<p id="para" class="spec">
<span>文字</span>
</p>
</div>
</body>
</html>
分析:可见两个选择器都没有选上,则权重都是0,则参考就近原则,即颜色为红色。
Test3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
span{
color:green;
}
.nav{
color:red;
}
.nav ul li{
color:blue;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><span>文字</span></li>
<li><span>文字</span></li>
<li><span>文字</span></li>
<li><span>文字</span></li>
</ul>
</div>
</body>
</html>
可见只有第一个选择器选中了,则为绿色,但是<li>
标签的颜色是蓝色,这个细节不要忽视了。
Test4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
#box1 div.spec2 p , #box1 #box2 p{
color:blue;
}
#box1 #box3 p{
color:green;
}
</style>
</head>
<body>
<div id="box1" class="spec1">
<div id="box2" class="spec2">
<div id="box3" class="spec3">
<p>文字</p>
</div>
</div>
</div>
</body>
</html>
当看到并集选择器时,就可以把他们分开来看,可见这三个选择器都选上了,再来比较权重,分别是:
1,1,2
2,0,1
2,0,1
这是发现有两个权重一样的选择器,可知通过谁在后面听谁的,即是绿色。
Test5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div div div div div div div div div div div div p{
color:red;
}
.haha{
color:blue;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<p class="haha">文字</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
很明显得知道是绿色,因为只有当有256个div标签选择器才能干过一个类选择器。