为什么这么写样式会没有效果呢！(关于圆点样式里的当前选中的圆点按钮)

.active{

box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;

background:#FFFFFF;

}

下面这样写是为了继承父元素样式吗？如果是的话那么就有些不理解了 .active 在父元素 .dots中父元素的样式不是自动继承吗？

.dots span.active{

box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;

background:#FFFFFF;

}

会飞的铁蛋 2017-07-14

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

收起

3回答

Miss路回答被采纳获得+3积分 2017-07-19 09:54:22

你上传的代码中并没有出现active的样式设置，而且active也不是在dots span下面，这样的话，你加上前端的dots span应该是不会有效果的，不知道你为什么会说加上才有效果。我不知道你的疑问在哪里，对不上，问题一定要描述清楚。我现在只能告诉你，如果你的代码中active是唯一的，你可以不写前面的dots 等，如果不是唯一的就需要加上前面的，因为你不写的话，全部的active 都会被选中。祝学习愉快！

收起回答

会飞的铁蛋提问者 #1

不好意思调试中过程中我把这个 active 类换成了 current 对比了下，在里还添加一点注释，上传的时候没留意不好意了。 .dots span.active{ background:rgba(255,255,255,0.9); box-shadow: 0 0 0 2px rgba(7,17,27,0.4)inset; } .dots span.current{ background:rgba(255,255,255,0.9); box-shadow: 0 0 0 2px rgba(7,17,27,0.4)inset; }

2017-07-19 13:55:20
会飞的铁蛋提问者 #2

非常感谢！

2017-07-19 17:44:06

Miss路 2017-07-17 09:51:47

把你的完整代码粘上来，我帮你看看原因，只看样式看不出问题。

收起回答

提问者会飞的铁蛋 #1

这是HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="css/index.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="main" id="main"> <div class="banner" id="banner"> <div class="banner-slide slide1 active slide-active"> <a href="javasctipt:"> <img src="img/bg1.jpg" /> </a> </div> <div class="banner-slide slide2"> <a href="javascript:"> <img src="img/bg2.jpg" /> </a> </div> <div class="banner-slide slide3"> <img src="img/bg3.jpg" /> </div> </div>  <a href="javascript:" class="botton prev" id="prev"></a> <a href="javascript:" class="botton next" id="next"></a>  <div class="dots"> <span class="current"></span> <span></span> <span></span> </div> </div> </body> </html> <script src="js/javascript.js"></script>

2017-07-18 20:17:02
提问者会飞的铁蛋 #2

这是CSS代码 *{margin: 0; padding: 0; border: none;} body{font-family: "微软雅黑";} a{text-decoration: none;} .main{ position: relative; width: 1200px;height: 460px; margin: 20px auto; } .banner{ width: 1200px;height: 460px; overflow: hidden; } .banner-slide{ position: absolute; width: 1200px;height: 460px; display: none; } .slide-active{ display: block; } /*图片点击切换图片上一张下一张*/ .botton{ position: absolute; left: 244px;top: 50%;margin-top: -40px; width: 40px;height: 80px; background: url(../img/arrow.png)no-repeat center; transform: rotate(180deg); border: solid 1px red; } .botton:hover{ background-color: gray; opacity: 0.4; } .next{ left: auto;right:0; transform: rotate(0deg); } /*圆点按钮点击切换图片*/ .dots{ position: absolute; right: 25px;bottom: 20px; } .dots > span{ display: inline-block; width: 12px;height: 12px;border-radius: 50%; margin-left: 8px; cursor: pointer; background:rgba(7,17,27,0.3);/*把这里去掉可以添加背景颜色*/ box-shadow: 0 0 0 2px rgba(255,255,255,0.6)inset; } .current{ border: solid 1px red;/*这又可以显示*/ background-color: #FFFFFF; } /*.dots span.current{ background-color: #FFFFFF; }*/

2017-07-18 20:17:56
提问者会飞的铁蛋 #3

这代码成一起，应该不好看吧！一保存就成这样了

2017-07-18 20:18:44

Miss路 2017-07-16 00:23:08

你问的是.active前面为什么要写.dots span吗？这样写是选择器规定了active是dots下面span下面的active，假如别的元素下也有一个class名也叫active的元素，加上前面的这一堆别的元素就不会被选中，如果只写.active{ }的话只要是class名为active的元素就都会被选中，而这里我们只要dots下面的active。祝学习愉快！

收起回答

提问者会飞的铁蛋 #1

.active{ box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset; background:#FFFFFF; }; 你说的我也晓得咯，我纠结的是为啥单写 .active{}的时候，里的样式一点也加不上呢？往前面加上 .dots span 样式就出来了。另我代码中这个 .active类没有相同的喔.

2017-07-16 19:17:35