我正在使用“反应多轮播”。该转盘上的点数代表幻灯片数量。每个点实际上是一个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或CSS解决方案？
答案 0 :(得分：0)
css就像瀑布，您不能只选择向下。
对于css解决方案，如果您可以控制轮播点，请以相反的顺序进行渲染。然后要显示它们，请执行类似flex-direction的操作：row-reverse;然后你可以做
li[data-index='7'].react-multi-carousel-dot--active ~ li { visibility: hidden; }
~是一个同级选择器，但仅对同级后的同级起作用。
您可能无法执行此操作，因为您无法控制轮播点的呈现方式，不确定。