Question

这是我正在寻找的东西。

我使用旋转木马，滑过7个svg的图标。每个图标都有一个id。

我使用以下css更改当前显示图标的css：

.slick-current #icon-1 path {
  fill: rgb(252, 238, 33);
}

.slick-current是div的一个类，#icon-1是svg内的div元素。

当轮播通过时，我有7个css样式，如上面的那个，目标是当前图标并应用不同的颜色。我想要同时做的是用不同的图标定位不同的div并对其应用一些css。例如：

如果slick-current的svg包含#icon-1，那么我想更改包含svg .slick-active的{{1}} div。有没有办法将这两者结合在一起？

轮播代码：

#icon-3

Slick.js代码：

        <div class="col-1 slider-cat-nav" id="slider_categories">
      <div>
        <img class="svg cat-icons-op" id="digital_icon" src="img/icons/icon-d.svg">
      </div>
      <div>
        <img class="svg cat-icons-op" id="inspire_icon" src="img/icons/icon-tools.svg">
      </div>
      <div>
        <img class="svg cat-icons-op" id="perform_icon" src="img/icons/icon-search.svg">
      </div>
      <div>
        <img class="svg cat-icons-op" id="automate_icon" src="img/icons/icon-rocket.svg">
      </div>
      <div>
        <img class="svg cat-icons-op" id="develop_icon" src="img/icons/icon-ab.svg">
      </div>
      <div>
        <img class="svg cat-icons-op" id="design_icon" src="img/icons/icon-tools.svg">
      </div>
      <div>
        <img class="svg cat-icons-op" id="plan_icon" src="img/icons/icon-rocket.svg">
      </div>
    </div>

通过slick.js将类$('.slider-cat-name').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.slider-cat-nav', speed: 1000, }); $('.slider-cat-nav').slick({ slidesToShow: 5, slidesToScroll: -1, arrows: false, asNavFor: '.slider-cat-name', vertical: true, //autoplay: true, autoplaySpeed: 3000, speed: 1000, draggable: false });和。.slick-current以及其他类添加到div中。

输出如下：

slick-active

Answer 1

如果只是针对一个维度，您可能会对一般~和相邻的+兄弟选择器取得一些成功，但如果涉及到子项，我认为纯CSS不可能。如果我做对了（HTML / JS示例会有帮助），处理这些场景的方式是通过脚本在父元素上设置一些标志，并根据它自定义子节点的规则（这应该不是问题考虑到你正在使用旋转木马）。例如，在父级上设置data-active-element="icon-1"属性时，规则可以是：

[data-active-element="icon-1"] .slick-active #icon-3 { whatever }

不是很优雅但是很有效。

对于JavaScript部分，在您的情况下see the doc of the Slick library，“事件”部分;没有测试它，但设置父的属性可能有点像这样：

$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  nextSlide.parent().attr('data-active-element', nextSlide.attr('id'));
});

<强>参考 General sibling selectors， Adjacent sibling selectors

如何更改两个不同类中的两个id css

1 个答案: