Question

我正在使用slick slider，其结构如下：

<div class="slick-track">
  <ul>
    <li class="slick slick-active"></li>
    <li class="slick slick-active"></li>
    <li class="slick slick-active"></li>
    <li class="slick"></li>
    <li class="slick"></li>
    <li class="slick"></li>
    <li class="slick"></li>
    <li class="slick"></li>
   <ul>
</div>

一次显示3张幻灯片。即当下一张幻灯片显示2,3,4 li得到slick-active类

时

我想要做的是从活动中选择中间元素并更改其背景颜色。

我尝试过这样做但不起作用

.slick-track .slick-active:nth-child(odd) {
    background: red;
}

.slick-track .slick-active:nth-child(even) {
    background: green;
}

或

.slick-track .slick-active:nth-child(2) {
    background: red;
}

它计算所有li，然后选择甚至关闭它们

修改当下一张幻灯片出现时，html看起来像这样

问题.slick-track .slick-active:nth-child(odd)如果使用它会在所有li元素中选择奇数 li

<div class="slick-track">
      <ul>
        <li class="slick"></li>
        <li class="slick slick-active"></li>
        <li class="slick slick-active"></li>
        <li class="slick slick-active"></li>
        <li class="slick"></li>
        <li class="slick"></li>
        <li class="slick"></li>
        <li class="slick"></li>
       <ul>
    </div>

Answer 1

您可以尝试：

.slick-active + .slick-active + .slick-active {
    background-color: initial;
}

.slick-active + .slick-active {
    background-color: red;
}

Answer 2

你试过吗

.slick-track .slick-active:nth-child(even){
    background: red;
}

这适用于所有数字，例如2,4,6，......对于您的情况，您需要2。

您也可以使用：

.slick-track .slick-active:nth-child(2){
    background: red;
}

在n-child中，n从0开始，所选元素从1开始。

Answer 3

您对课程.

缺少slick-active

.slick-track .slick-active:nth-child(2){
    background: red;
}

Answer 4

.slick-track slick-active：nth-child（odd）表示选择类型为 slick-active 的奇数元素，该元素位于类 slick-中跟踪。但在这里，您需要选择名为光滑活跃的类。因此，您需要在名称的开头加入“。”。这里是修改过的css：

    .slick-track .slick-active:nth-child(odd){
       background: red;
      }

     .slick-track .slick-active:nth-child(even){
        background: green;
      }

Answer 5

你为.滑雪，因为课堂重复。所以请使用以下风格

<style> 
.slick-track  .slick-active:nth-child(odd){
    background: red;
}

.slick-track  .slick-active:nth-child(even){
    background: green;
}
</style>

OR 你可以使用Jquery

   <script>
   $( "div li:nth-child(even)" ).css('background','green');
   $( "div li:nth-child(odd)" ).css('background','red');
   </script>

Answer 6

使用公式（a + b）。描述：a表示循环大小，n是计数器（从0开始），b是偏移值。

在这里，我们为索引为2的倍数的所有li元素指定背景颜色：

＆＃13;

.slick-track .slick-active:nth-child(2n+1){
       background: orange;
      }

     .slick-track .slick-active:nth-child(2n+2){
        background: black;
      }

＆＃13;

<div class="slick-track">
<ul>
<li class="slick">slick</li>
<li class="slick slick-active">slick-active</li>
<li class="slick slick-active">slick-active</li>
<li class="slick slick-active">slick-active</li>
<li class="slick">slick</li>
<li class="slick">slick</li>
<li class="slick">slick</li>
<li class="slick">slick</li>
</ul>
</div>

＆＃13;

用css或jquery改变第n个孩子的颜色

6 个答案: