为什么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盒子的部分就会被隐藏*/
} 24
收起
正在回答 回答被采纳积分+1
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; }就可以了。
相似问题
登录后可查看更多问答，登录/注册
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10205 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星