1.
<style type="text/css">
#haha .heiheihei p{
color:red;
}
div div #xixi p{
color:blue;
}
div.hahaha div.heiheihei div.xixixi p{
color:green;
}
</style>
</head>
<body>
<div id="haha" class="hahaha">
<div id="heihei" class="heiheihei">
<div id="xixi" class="xixixi">
<p>猜我啥色</p>
</div>
</div>
</div>
</body>
三个都选中了p标签,但是第三个没有id选择器,第二个没有类选择器。按权重则第一个(1,1,1),第二个(1,0,3),第三个(0,3,4)。所以是红色。
2.
<style type="text/css">
div p{
color:red;
}
#box{
color:blue;
}
</style>
</head>
<body>
<div id="box">
<p id="para" class="spec">
<span>what color is it?</span>
</p>
</div>
</body>
第一个和第二个都没有选中span标签,大家权重都是0,比就近,p离的更近,所以是红色。
3.
<style type="text/css">
span{
color:green;
}
.nav{
color:red;
}
.nav ul li{
color:blue;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><span>shenmeyansea</span></li>
<li><span>shenmeyansea</span></li>
<li><span>shenmeyansea</span></li>
</ul>
</div>
</body>
第二个和第三个都没有选中span,权重都是0,第一个的权重是(0,0,1),所以是绿色。
4.
<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>haha</p>
</div>
</div>
</div>
</body>
逗号是表示并集选择器,即分组选择器,要拆开计算,也就相当于写了两个标签。其实CSS选择器也就相当于:
<style type="text/css">
#box1 div.spec2 p {
color:blue;
}
#box1 #box2 p{
color:blue;
}
#box1 #box3 p{
color:green;
}
</style>
第一个选中了,权重是(1,1,2);第二个选中了,权重是(2,0,1);第三个选中了,权重是(2,0,1)。后两者权重一样的时候,以第三个为准。
5.
<style type="text/css">
#father #son{
color:blue;
}
#father p.c2{
color:black;
}
div.c1 p.c2{
color:red;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">这行字是什么颜色?</p>
</div>
</body>
选择了p就选择了文字,三个选择器都选了。第一个权重(2,0,0),第二个权重(1,1,1),第三个权重(0,2,2)。
6.
<style type="text/css">
#father{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<div id="father">
<p>这行字是什么颜色?</p>
</div>
</body>
继承性标签权重是0,p标签被选中了,权重是(0,0,1),所以是蓝色。
7.
<style type="text/css">
div p{
color:red;
}
#father{
color:red;
}
p.c2{
color:blue;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p class="c2">这行字是什么颜色?</p>
</div>
</body>
第一个和第三个都选中了,所以看权重,第一个(0,0,1),第三个(0,1,1),所以是蓝色。
8.
<style type="text/css">
div div{
color:blue;
}
div{
color:red;
}
</style>
</head>
<body>
<div>
<div>
<div>
到底是什么颜色啊啊啊啊啊啊啊
</div>
</div>
</div>
</body>
两个都选中了(选择器只看祖先结构,只表示选中or未选中;不能表示具体选中了哪一个div,只表示已经选择上了内层div)。第一个权重(0,0,2),第二个权重(0,0,1)。
9.
<style type="text/css">
#box1 div{
color:red;
}
#box3{
color:blue;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
到底是什么颜色啊
</div>
</div>
</div>
</body>
两个选择器都选中了,第一个选择器表示box1的所有后代选择器都选择上了,也就选择上了最内层div,是有权重的(1,0,1)。第二个选择器也选择上了最内层div,也是有权重的(1,0,0)。并不是通过继承影响的。
同一个标签携带多个类名有冲突——取决于CSS中写在后面的选择器
1.我是蓝色
<style type="text/css">
.spec1{
color:red;
}
.spec2{
color:blue;
}
</style>
</head>
<body>
<p class="spec1 spec2">我是什么颜色?</p>
</body>
2.我是红色
<style type="text/css">
.spec2{
color:blue;
}
.spec1{
color:red;
}
</style>
</head>
<body>
<p class="spec1 spec2">我是什么颜色?</p>
</body>
3.我是红色
<style type="text/css">
.spec2{
color:blue;
}
.spec1{
color:red;
}
</style>
</head>
<body>
<p class="spec2 spec1">我是什么颜色?</p>
</body>
4.我是蓝色
<style type="text/css">
.spec1{
color:red;
}
.spec2{
color:blue;
}
</style>
</head>
<body>
<p class="spec2 spec1">我是什么颜色?</p>
</body>
5.
html:
<div class="c1" id="box1">
<div class="c2" id="box2">
<div class="c3" id="box3">
<p>文字颜色</p>
</div>
</div>
</div>
第一种CSS:
<style type="text/css">
#box1 #box3{
color:green;
}
#box2 #box3{
color:blue;
}
</style>
第二种CSS:
<style type="text/css">
#box2 #box3{
color:blue;
}
#box1 #box3{
color:green;
}
</style>
权重一样,颜色取决于后者。
所有的权重计算,不存在任何兼容问题!