为什么display:block没有被执行？

赋予了slide-active 却没有执行display:block;

为什么？

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>综合实例</title>
	<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
	<div class="main">
		<!-- 图片轮播 -->
		<div class="banner">
			<!-- 如果图片是死的，我们可以去除a标签，要是图片能实现跳转。则需要添加a标签。实际开发最好添加a标签，方便后期的维护和修改 -->
			<a href="">
				<!-- 由于我们不确定用户将点击哪一个按钮
				显示哪一张图片，因此我们可以给div添加一个 slide-active属性（实现显示功能），利用Java-Script，当用户点击某个按钮时则把给属性赋值给某张图片,默认将其赋值给第一张图片-->
				<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>
	</div>
</body>
</html>

*{
	margin: 0;
	padding:0;
}

ul{
	list-style: none;
}

body{
	font-family: "微软雅黑";
	color:#14191e;
}

.main{
	width: 1200px;
	/*这里的宽高要和图片的一样*/
	height: 460px;
	/*使图片水平居中、前一个参数是上下、后一个参数是左右*/
	margin: 30px auto;
	/*超出该范围的内容会被隐藏*/
	overflow: hidden;
}

.main .banner{
		/*宽高和盒子的宽高一样*/
	width: 1200px;
	height: 460px;
	/*子盒子的定位要相对于父盒子来定位*/
	position: relative;
	/*why?*/
	overflow: hidden;
}

.main .banner .banner-slide{
	/*盒子的宽高和我们main盒子的宽高一致*/
	width: 1200px;
	height: 460px;
	/*图片不平铺*/
	background-repeat: no-repeat;
	/*由于我们需要将所有图片重叠起来，这样当我们要
	显示某张图片时，只需要将其显示出来就行
	因此我们要用到position:absolute*/
	position: absolute;

	/*功能：当点击按钮的时候该图片才显示出来，因此它
	默认就应该是隐藏的*/
	display: none;
}

.slide-active{
	/*显示被隐藏的模块*/
	display: block;	
}

/*由于我们添加的图片大小是不相同的，因此我们需要对各个slide进行各自的操作*/
.slide1{
	/*由于上面已经使用了background-repeat，因此这里就不能使用backrgound:
	这样上面的background-repeat就不起作用了*/
	background-image: url("../img/bg1.jpg");
}
.slide2{
	background-image: url("../img/bg2.jpg");
}	
.slide3{
	background-image: url("../img/bg3.jpg");
	/*这里的div是按照上下的顺序进行排列的
	由于main盒子的大小和图片盒子的大小是一样的
	我们在mian盒子里面设置了overflow:hidden;
	因此超过main盒子的部分就会被隐藏*/
}

乐高战士 2017-11-11

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

收起

3回答

Special994 2017-12-12 17:56:41

这个应该是选择器优先级的问题，代码中.main .banner .banner-slide{ display: none; }有三个类选择器，.slide-active{ display: block; }这里只有一个类选择器，所以虽然都是选中同一个元素，但后者的优先级更低，被前面的覆盖了，图片显示不出来，把 .slide-active{ display: block; }改成.main .banner .slide-active{ display: block; }就可以了。

收起回答

慕粉4037919 #1

。。。百度了半天这个问题。这老师跟以前的老师不是同一个人使用选择器的习惯不一样。有的写一个有的写三个。而身为小白的我又不知道这种优先级问题。。视频里又没讲过，，，哎发了这么多牢骚，。。还有谢谢你

2018-11-03 11:39:43
释毒3461801 #2

要学会多用控制台去找问题

2018-11-04 20:39:46

好帮手慕珊 2017-11-12 11:52:23

我用你上面贴的代码，把.main .banner .banner-slide样式里的display:none;注释了就可以显示内容了，你可以试试，看看是你想要的效果吗。祝学习愉快！

收起回答

提问者乐高战士 2017-11-11 11:22:11

为什么我做了下面的改动，程序又可以了？

<a href="">
				<!-- 由于我们不确定用户将点击哪一个按钮
				显示哪一张图片，因此我们可以给div添加一个 slide-active属性（实现显示功能），利用Java-Script，当用户点击某个按钮时则把给属性赋值给某张图片,默认将其赋值给第一张图片-->
				<div class="banner-slide slide1" id="slide-active"></div>
			</a>

#slide-active{
	/*显示被隐藏的模块*/
	display: block;	
}

收起回答

荒小北158 #1

因为在html中你设置的是slide-active是class 所以应该改成 .slide-active{display:block;}

2017-11-22 00:52:58

相似问题

我被执行了为什么不能输出，和什么条件下能被输出啊

为什么我使用了join方法却并没有抢占执行

为什么wait（5000）放在if(flag)前面。就只执行一次啊。

nAdd（）函数为什么能执行。

16:30,先执行reduce为什么size会不是0啊

登录后可查看更多问答，登录/注册

从网页搭建入门Java Web2018版

参与学习人
提交作业 1088 份
解答问题 10204 个

如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！

了解课程

本课精华内容

问答作业

为什么这样不报错？

6 1

老师请问一下

1 4

老师这样写可以嘛

2 1

老师这样写可以吗

7 1

我为了实现两行三列的效果，设置了三级div。老师您看，这样编程符合要求吗

10 1

查看更多本课问答

请稍等 ...