图片显示不出来，帮忙找一下错误
来源：2-2 轮播图样式（2）
qq_ibertine_0
2020-08-18 17:13:26
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="轮播图.css">
</head>
<body>
<div class="main">
<div class="banner">
<a href="">
<div class="banner-slide b1 slide-active"></div>
</a>
<a href="">
<div class="banner-slide b2"></div>
</a>
<a href="">
<div class="banner-slide b3"></div>
</a>
</div>
<div>
<a href="javascript:void(0)" class="button prey"></a>
<a href="javascript:void(0)" class="button next"></a>
</div>
<div class="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
*{
margin:0px;
padding: 0px;
}
ul{
list-style:none;
}
body{
font-family:"微软雅黑";
color:#14191e;
}
.main{
width:1200px;
height:460px;
margin:30px auto;
overflow:hidden;
position:relative;
}
.banner{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}
.banner .banner-slide{
width:1200px;
height:460px;
position:absolute;
background-repeat:no-repeat;
display:none;
}
.slide-active{
display:block;
}
.b1{
background-image:url("img/bg1.jpg");
}
.b2{
background-image:url("img/bg2.jpg");
}
.b3{
background-image:url("img/bg3.jpg");
}
.button{
position:absolute;
width:40px;
height:80px;
left:244px;
top:50%;
margin-top:-40px;
background-color:#0f0;
background:url("img/arrow.png") no-repeat center center;
}
.button:hover{
background-color:#333;
opacity:0.8;
}
.prey{
transform:rotate(180deg);
}
.next{
left:auto;
right:0;
}
.dots{
position:absolute;
right:30px;
bottom:24px;
text-align:right;
}
.dots span{
display:inline-block;
height:12px;
width:12px;
line-height:12px;
border-radius:50%;
background-color:rgba(7, 17, 27, 0.4);/* 这行和下面那行是设置背景颜色和阴影的*/
box-shadow:0 0 0 2px rgba(255, 255, 255, 0.8) inset;
margin-right:20px;
cursor:pointer;
}
.dots span.active{
box-shadow:0 0 0 2px rgba(7, 17, 27, 0.4) inset;
background-color:#fff;
}
2回答
-
同学你好，这里涉及到权重，权重高的样式会生效。.banner .banner-slide和.slide-active中都设置了div的display属性，哪个设置起作用要看权重。
由于前者（.banner .banner-slide）是两个类选择器而后者（.slide-active）是一个类选择器，两个选择器的权重高，所以元素的display值最终为none，图片显示不出来。
去掉.banner后，这两个css样式都是一个类选择器，权重一样，这时写在后面的样式生效。由于.slide-active写在后面，所以.slide-active中设置的样式生效，元素的display值最终为block，图片就会显示出来。
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0 -
好帮手慕阿慧
2020-08-18
同学你好，在css文件中，应该将.banner-slide前面的.banner去掉。
如下：
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0h020-08-18
相似问题