当一个类应用于其中一个兄弟元素时，有没有一种方法来设置兄弟元素的样式？答案

【问题标题】：Is there a way to style sibling elements when a class is applied to one of them?当一个类应用于其中一个兄弟元素时，有没有一种方法来设置兄弟元素的样式？
【发布时间】：2020-10-31 10:22:32
【问题描述】：

我正在使用“react-multi-carousel”。这个轮播有幻灯片数量的点。每个点实际上是一个li 元素，具有一个名为[data-index='X'] 的数据属性，X 是幻灯片编号。例如，在我的项目中，最后一张幻灯片是 7，所以最后一个 li 元素有 [data-index='7'] 并且添加到它的类是 .react-multi-carousel-dot--active。

我的问题是：当最后一个元素具有此类时，有没有办法可以将所有兄弟li 元素的可见性更改为隐藏？

到目前为止我只有

[data-index='7'].react-multi-carousel-dot--active {
      visibility: hidden;
    }

当然，这只会修改最后一个 li 元素。这个问题有css或者scss解决方案吗？

【问题讨论】：

标签： css reactjs sass carousel

【解决方案1】：

css 就像瀑布一样，不能只向上选择。

对于 css 解决方案，如果您可以控制轮播点，请以相反的顺序呈现它们。然后显示它们做类似 flex-direction: row-reverse;然后你可以做

li[data-index='7'].react-multi-carousel-dot--active ~ li { visibility: hidden; }

~ 是一个兄弟选择器，但只会作用于自身之后的兄弟。

您可能无法做到这一点，因为您无法控制轮播点的渲染方式，不确定。

这个概念是一样的https://codepen.io/theskillwithin/pen/GEmroE

【讨论】：