.slide-active display:block；不显示图片

HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/css1.css">
	<script type="text/javascript" src="js/js1.js"></script>
</head>
<body>
	<div class="main" id="main">
		<!-- 图片轮播 -->
		<div class="banner">
			<a href="">
				<div class="banner-slide slide1 slide-active"></div>
			</a>
			<a href="">
				<div class="banner-slide slide2"></div>
			</a>
			<a href="">
				<div class="banner-slide slide3"></div>
			</a>
	</div>
</body>
</html>

CSS

*{
	margin: 0px;
	padding: 0px;
}
body{
	font-size: "微软黑体";
	color: #11419e;
}
ul{
	list-style: none;
}
.main{
	width: 1200px;
	height: 460px;
	margin: 30px auto;
	overflow: hidden;
}
.main .banner{
	width: 1200px;
	height: 460px;
	overflow: hidden;
	position: relative;
}
.main .banner .banner-slide{
	width: 1200px;
	height: 460px;
	background-repeat: no-repeat;
	float: left;
	position: absolute;
	display: none;
}
.slide-active{
	display: block;
}
.slide1{
	background-image: url(../img/bg1.jpg);
}
.slide2{
	background-image: url(../img/bg2.jpg);
}
.slide3{
	background-image: url(../img/bg3.jpg);
}

wacky1 2020-05-18

源自：项目：JavaScript轮播图 2-2 轮播图样式（2）

收起

2回答

好帮手慕小尤回答被采纳获得+3积分 2020-05-18 18:46:05

同学你好，1. 一个元素同时应用多个class，后定义的优先。

2. 同学可以不按照级写，直接通过 .slide-active设置样式，但因同学在设置.main .banner .banner-slide时，是按级写的，则直接使用.slide-active无法覆盖.main .banner .banner-slide中定义的样式，则需要设置为.main .banner .slide-active，进行覆盖。

3. 建议同学逐级写属性名。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

好帮手慕小尤 2020-05-18 17:52:47

同学你好，通过.slide-active未覆盖.main .banner .banner-slide中设置的布局，则建议一下修改为.main .banner .slide-active使其显示，如下所示：

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

提问者 wacky1 #1

我有点不明白视频里面class=".banner-slide slide1 slide-active"是怎么分级别的。意思是如果我是按逐级写的.main .banner .banner-slide要选取到.banner-slide的slide1 或者 slide-active，我都必须逐级写吗？W3C规范是按那种写?

2020-05-18 18:09:29