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

【问题标题】：Nth-child on carousel not working旋转木马上的第 N 个孩子不工作
【发布时间】：2017-05-25 18:31:19
【问题描述】：

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

【问题讨论】：

尝试 .slick-track > div.slick-active:first-child .
它不起作用...我认为它与slick-active类有关，因为它是通过JS添加的...

标签： javascript html css css-selectors slider

【解决方案1】：

我找到了答案，以防有人需要。

滑块在屏幕上显示 3 张幻灯片，该类为 slick-active，因此我需要为每张幻灯片应用样式，但 nth-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)

【讨论】：

很好地使用了级联。 ;-)

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案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"]

【讨论】：

感谢您的回答，但幻灯片移动时数据不会改变，因此每张幻灯片都是固定的。

【解决方案4】：

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

【讨论】：