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

Question

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

例如：

foreach (XElement xItem in xmlDoc.Root.Elements("item"))
{
    if (xItem.Element("a") != null)
    {
        // element <a>...</a> found
    }
    else if (xItem.Element("b") != null)
    {
        // element <b>...</b> found
    }
    ...
}

https://jsfiddle.net/pixelatorz/73scpych/2/

Answer 1

你可以通过播放消除过程这样做：

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

请参阅demo

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

修改

如果您认为未来将有超过3个活动幻灯片，并且您希望使其更加可靠，我建议您将活动幻灯片包装在<span>中并将其分类为活动幻灯片或类似内容。然后。您可以使用nth-child选择他们而不使用.slickslider作为父母。

Answer 2

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

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