您的位置：首页 > Web前端 > CSS

CSS——关于继承性和层叠性的练习

2017-09-14 16:30 441 查看

<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>

权重一样，颜色取决于后者。

所有的权重计算，不存在任何兼容问题！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航