通过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屋！