为什么这了使用nth-child()选择器之后设置右侧广告覆盖了左侧的广告 而不使用就没有问题
来源：4-3 编程练习
慕勒7338053
2019-05-27 16:09:42
使用nth-child()选择器的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;
padding: 0;}
.a{
margin:0 auto;
position:relative;
width: 100%;
height: 100%;
}
.a:nth-child(2){
position: fixed;
left: 0;
top:50%;
margin-top:-180px;
}
.a:nth-child(3){
position: fixed;
right:0;
top: 50%;
margin-top:-180px;
}
</style>
</head>
<body>
<div class="a">
<img src="http://climg.mukewang.com/59c9f7ce0001839219034033.png">
</div>
<div class="a">
<img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png">
</div>
<div class="a">
<img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png">
</div>
</body>
</html>
不使用nth-child()选择器的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;
padding: 0;}
.a{
margin:0 auto;
position:relative;
width: 100%;
height: 100%;
}
.b{
position: fixed;
left: 0;
top:50%;
margin-top:-180px;
}
.c{
position: fixed;
right:0;
top: 50%;
margin-top:-180px;
}
</style>
</head>
<body>
<div class="a">
<img src="http://climg.mukewang.com/59c9f7ce0001839219034033.png">
</div>
<div class="b">
<img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png">
</div>
<div class="c">
<img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png">
</div>
</body>
</html>
1回答
-
同学你好！
代码效果实现是可以的~
经过测试，因为a的百分之百的宽度覆盖了.a:nth-child(3)。是因为a宽度太大了，覆盖了a(3)
删除宽度：
如果帮助到了你 欢迎采纳 祝学习愉快~
0
相似问题