设置了图片1显示但是没有显示
来源：2-2 轮播图样式（2）
VN666
2020-02-22 21:35:52
*{
padding: 0;
margin:0;
}
ul{
list-style: none;
}
body{
font-family: "楷体";
}
.main{
width: 1200px;
height: 460px;
margin:30px auto;
overflow: hidden;
}
.banner{
width: 1200px;
height: 460px;
position: relative;
overflow: hidden;
}
.banner .banner-img{
width: 1200px;
height: 460px;
position: absolute;
background-repeat: no-repeat;
display: none;
}
.imgs-active{
display: block;
}
.img1{
background-image: url("../../images/1.jpg");
}
.img2{
background-image: url("../../images/2.jpg");
}
.img3{
background-image: url("../../images/3.jpg");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二次元</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<div class="main">
<!--图片轮播-->
<div class="banner">
<a href="#">
<div class="banner-img img1 imgs-active">
</div>
</a>
<a href="#">
<div class="banner-img img2"></div>
</a>
<a href="#">
<div class="banner-img img3"></div>
</a>
</div>
</div>
</body>
</html>
1回答
-
同学你好！这里涉及到一个css优先级的问题，同学在设置图片不显示时使用了.banner .banner-img这样的层级关系来设置的，而在设置第一张图片显示时直接使用了.imgs-active ，由于一级一级设置的优先级比较高，所以覆盖了后面的样式，同学在设置时也按层级来设置即可，具体如下：
如果我的回答解决了你的疑惑，请采纳，祝学习愉快~
0
相似问题