.slide-active(display:block;) 就是不显示。我找不到原因
################ html 部分##############
<!DOCTYPE html>
<html>
<head>
<title>轮播图的设计</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="main" class="main">
<!--以后用来加导航栏-->
<!--这里是图片轮播部分-->
<div id="banner" 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>
</div>
</body>
</html>
#################### CSS 部分###################
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
body{
font-family:"微软雅黑";
color:#14191e;
}
.main{
width:1200px;
height:460px;
margin:30px auto;
overflow:hidden;
}
.banner{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}
.main .banner .banner-slide{
width:1200px;
height:460px;
background-repeat:no-repeat;
position:absolute;
display:none;
}
.slide-active{
display:block;
}
.slide1{
background-image:url(../image/bg1.jpg);
}
.slide2{
background-image:url(../image/bg2.jpg);
}
.slide3{
background-image:url(../image/bg3.jpg);
}
正在回答
因为你这里加上了他的父级.main .banner .banner-slide，而写.slide-active的时候没有写，其实这两个选择器都是对同一个标签进行设置，加上父级的要比不加父级的优先级高，如果要买都加父级，要买都不加父级，相同的形势下，后写的会覆盖先写的。祝学习愉快！
，要么都加上父级，要么都不加，否则会对他的优先级有影响。
前面加上他的父元素
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星