在同一级别上隐藏同级的同级组件

Question

我有一个像这样的div

<div class='normal-select'>....content</div>
<div class='indicators'>....content</div>

<div class='multi-select'>....content</div>
// hide the indicators below
<div class='indicators'>....content</div>

然后，使用styled-components/sass，我希望隐藏div旁边带有multi-select类名的指示符。

我已经在我的styled-component中尝试了下面的方法，但不幸的是，它不能工作。

.multi-select {
  + .indicators {
    display: none;
  }
}

有人能解释我需要做什么吗？

Answer 1

工作实例

​

.multi-select~.indicators {
  display: none;
}

<div class='normal-select'>....content a</div>
<div class='indicators'>....content b</div>
<div class='multi-select'>....content c</div>
// hide the indicators below
<div class='indicators'>....content d</div>

​