通过 css-selector 在 slickslider 中选择第二张活动幻灯片

Question

我正在使用光滑的滑块并显示 3 张幻灯片，我想在中间的幻灯片上添加特定的样式。通过使用 nth-of-type 但是当我添加 .slick-active:nth-of-type(2) 任何想法时它似乎失败了？

例如：

<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/

Answer 1

你可以通过玩消除过程来做到这一点：

.slickslider .slick-active + .slick-active:nth-child(odd){
    background: pink !important;
}

见demo

基本上，用+ 消除第一个，然后通过选择odd 孩子消除最后一个。或者第一个孩子也可以工作

编辑

如果您认为将来会有超过 3 个活动幻灯片，并且希望使其更加可靠，我建议您将活动幻灯片包装在 <span> 中，并将其归类为 active-slides 或类似的东西。然后。您将能够使用 nth-child 选择它们，而无需使用 .slickslider 作为父级。

Answer 2

这是一个愚蠢的解决方案，但有效：

.slick-slide:nth-of-type(6){
  background: pink;
}