jquery - 用 css 或 jquery 改变第 n 个 child 的颜色

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) 如果使用它，它会选择 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;
}