通过css-selector在slickslider中选择第二个活动幻灯片 [英] select second active slide in slickslider through css-selector
问题描述
我正在使用光滑的滑块并显示3张幻灯片,我想在中间幻灯片上添加特定的样式.通过使用nth-of-type,但是当我添加.slick-active:nth-of-type(2)任何想法时,它似乎失败了?
I am using slick slider and showing 3 slides, I would like to add specific styling on the center slide. by using nth-of-type but it seems to fail when I add .slick-active:nth-of-type(2) any ideas?
例如:
<div class="slickslider">
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide slick-current slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
</div>
.slick-slide{
background: blue;
width: 20px;
height: 20px;
margin-bottom: 1px;
}
.slick-active{
background: green;
width: 20px;
height: 20px;
}
.slick-active:nth-of-type(2){
background: pink;
}
https://jsfiddle.net/pixelatorz/73scpych/2/
推荐答案
您可以通过玩消除的过程来做到这一点:
You can do it this way by playing process of elimination:
.slickslider .slick-active + .slick-active:nth-child(odd){
background: pink !important;
}
请参见 演示
基本上,使用 +
消除第一个,然后通过选择 odd
子级消除最后一个.否则第一个孩子也会工作
Basically, eliminate the first one with the +
and next, eliminate the last one by choosing the odd
child. Or first child would've worked too
编辑
如果您认为将来会有3张以上的活动幻灯片,并且希望使其更加可靠,我建议您将活动幻灯片包装在< span>
中并将其分类为活动-幻灯片或类似的内容.然后.您可以使用 nth-child
通过它们进行选择,而无需使用 .slickslider
作为父项.
If you think there will be more than 3 active slides in the future and you want to make this more dependable, I suggest you wrap the active slides in a <span>
and class it active-slides or something similar. Then. you will be able to select through them with nth-child
without using .slickslider
as a parent.
这篇关于通过css-selector在slickslider中选择第二个活动幻灯片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!