旋转木马的第N个孩子不工作

Question

我正在创建一个滑块，我正在尝试将样式应用于该位置的每张幻灯片。 我不知道为什么，但是这个孩子不起作用......这就是我所追求的：.slick-track .slick-active:nth-child(1) 有什么想法吗？

Answer 1

＆＃13;

＆＃13;

$(".slick-active").first().css("background-color", "green");

＆＃13;

.slick {
  background-color: red;
  height: 20px;
  width: 100px;
}

.slick-active {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="slick">
  </div>
  <div class="slick slick-active">
  </div>
  <div class="slick slick-active">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我找到答案，万一有人需要它。

滑块在屏幕上显示了3个幻灯片，这个类slick-active所以我需要为每张幻灯片应用样式，但是n-child还没有工作。

可以用CSS解决：

.slick-active (For the first slide)

.slick-active + .slick-active (For the second slide)

.slick-active + .slick-active + .slick-active (For the third slide)

Answer 3

如果我正确理解您的问题，您可以选择三个不同的.slick-active div：

• .slick-track div[data-slick-index="-1"]
• .slick-track div[data-slick-index="0"]
• .slick-track div[data-slick-index="1"]

Answer 4

您可以尝试所有三张幻灯片的内联样式以及！important。