选择器的问题

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

active这个class在文档中只存在于指定的span里，那么为什么.active不能设置样式，非要.dots span.active才行

liqihang 2018-04-11

源自：项目：JavaScript轮播图 2-4 轮播图上圆点按钮

收起

3回答

一叶知秋519 2018-04-12 11:01:48

权值是这样的：

直接在标签中写样式的话，权值是1000，id选择器是100，类选择器是10，元素选择器是1

权值越高，优先级越高

你可以看下这个截图，如果只写.active选择器，由于前面通过.dots span给span元素设置了样式，.active选择器的权值就会低于.dots span选择器的权值，.active选择器的权值低于.dots span选择器，所以优先级也低，所以没有生效。

在.active选择器前面加个元素选择器或者父级的类，加上元素选择器后，它们的权值和是相等的，权值相等的时候，使用就近原则，就是谁离这个元素近，谁生效；也就是span.active定位的更加具体。

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

收起回答

提问者 liqihang 2018-04-11 17:48:55

*{
margin: 0;
padding: 0;
}
body{
font-family: "微软雅黑";
color: #14191e;
}
.main{
width: 1200px;
height: 460px;
overflow: hidden;
margin: 30px auto;
position: relative;
}
.banner{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.banner-slide{
width: 100%;
height: 100%;
background-repeat: no-repeat;
position: absolute;
display: none;
}
.slide1{
background-image:url(img\\bg1.jpg);
}

.slide2{
background-image:url(img\\bg2.jpg);
}

.slide3{
background-image:url(img\\bg3.jpg);
}
.slide-active{
display: block;
}
.button{
position: absolute;
width: 40px;
height: 80px;
left: 244px;
top: 50%;
margin-top: -40px;
background: url("img\\arrow.png") no-repeat center center;
/*background-color: gray;*/

}
.prev{
transform: rotate(180deg);
}
.next{
right: 0;
left: auto;
}
.button:hover{
background-color: #333;
opacity: 0.5;
}
.dots{

position: absolute;
bottom: 20px;
right: 0;
text-align: right;
margin-right: 30px;
}
.dots span{
   width: 12px;
   height: 12px;
   border-radius: 50%;
   line-height: 12px;
   /*background-color:black;
   opacity: 0.4;*/
   background:rgba(7,17,27,0.4);
/*添加阴影*/
   box-shadow: 0 0 0 1px rgba(255,255,255,0.8) inset;
   display: inline-block;
margin-left: 10px;
cursor: pointer;/*光标形状*/
}
.active{
background: #fff;
box-shadow: 0 0 0 1px rgba(7,17,27,0.4) inset;
}

老师你在试试这个，我这如果.active，效果出不来html文件在下面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>综合案例</title>
<link rel="stylesheet" type="text/css" href="综合案例.css">
<body>
<div class="main">
  <div class="banner">
   <a href="javascript:void();">
    <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 class=" button prev"></a>>
   <a class=" button next"></a>

  <div class="dots">
   <span class="active"></span>
   <span></span>
   <span></span>
  </div>
</div>
<script src="综合案例.js"> </script>
</body>
</html>

收起回答

一叶知秋519 #1

因为给span元素设置过同样的样式了，而且给span元素设置样式的选择器中带有父级，权值会比.active高，所以需要给.active选择器加上父级，也就是span.active{}。这样就会生效了。

2018-04-11 18:52:18
提问者 liqihang 回复一叶知秋519 #2

这个所谓的权值和选择器优先级不一样吗？照我的理解，类选择器优先级是高于元素选择器的，也就是说.active比span优先级高所以 background:box-shadow:这两个属性会以.active中的为准。那么权值又是怎么定义的

2018-04-11 19:07:45

一叶知秋519 2018-04-11 16:32:05

我试了一下你说的这个情况，是可以设置样式的呀：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .active {
        background: lightblue;
    }
    </style>
</head>
<body>
    <span class="active">慕课网</span>
</body>
</html>

祝学习愉快！

收起回答