老师为什么我的圆点不会变成白色，就是.dots span .active 那里

<!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" id="main">
  
  <div class="banner" id="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>
  
  <a href="" class="button prev"></a>
  <a href="" class="button next"></a>
  
  <div class="dots">
   <span class="active"></span>
   <span ></span>
   <span ></span>
  </div>
</div>
<script src="js/script.js"></script>
</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;
position: relative;
}

.banner{
width: 1200px;
height: 460px;
overflow: hidden;
position: relative;
}

.banner-slide{
width: 1200px;
height: 460px;
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");
}

.button{
position: absolute;
width: 40px;
height: 80px;
left: 244px;
top:50%;
margin-top:-40px;
background: url(../img/arrow.png) no-repeat center center;
}

.button:hover{
background-color: #333;
opacity: 0.8;
filter: alpha(opacity=80);
}

.prev{
transform: rotate(180deg);
}

.next{
left: auto;
right:0;

}

.dots{
position: absolute;
right: 20px;
bottom: 24px;
text-align: right;
}

.dots span{
display: inline-block;
width: 12px;
height: 12px;
line-height: 12px;
border-radius: 50%;
background: rgba(7,17,27,0.4);
box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset;
margin-left: 8px;
cursor:pointer;
}

.dots span .active{
box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset;
background: #fff;
}

qq_追忆_57 2018-09-26

源自：项目：JS实现轮播特效 2-4 轮播图上圆点按钮

收起

1回答

妮可妮可妮_ 回答被采纳获得+3积分 2018-09-27 09:39:03

想要实现添加active类的span为白色,建议参考下图所示修改:

祝学习愉快!

收起回答

qq_追忆_57 提问者 #1

老师为什么我删除了.dots span .active 以后打开一次网页，后来又写上再打开网页就实现了呢，这是为什么。而且图片那里也是，修改了css和js文件以后需要重新打开，刷新不出现效果呢

2018-09-27 10:39:12
妮可妮可妮_ 回复提问者 qq_追忆_57 #2

1. 请同学重新上传第二次的代码,以便更好的检测和解决问题,猜测同学写的为:.dots span.active{ }span后面没有空格,所以可以实现效果 2. 图片那里具体是什么问题,不是很明白同学的疑惑之处,请尽量清晰完善地描述问题，以便大家给予专业的回复。

2018-09-27 11:07:16
qq_追忆_57 提问者回复妮可妮可妮_ #3

就是span那里的空格，老师说的已经很明白了，谢谢老师

2018-09-27 13:25:33