隐藏同级样式组件上的同级答案

【问题标题】：hide a sibling on the same level styled-components隐藏同级样式组件上的同级
【发布时间】：2019-12-20 10:46:05
【问题描述】：

我有一个像这样的 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 我想用multi-select 类名隐藏div 旁边的指标。

我在styled-component 中尝试了以下方法，但不幸的是它不起作用。

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

谁能解释我需要做什么？

【问题讨论】：

我认为仅使用 CSS 是无法实现的，因为它是基于层次结构的。 jQuery 可以使用 $('.multi-select').next('.indicators').addClass('displayNone'); 来解决这个问题或 .css('display', 'none');
没有+ 只有~ ;) CSS_Selectors
@GrzegorzT.is it possible,从+切换到〜但仍然无法正常工作
@Keith 来自 GrzegorzT 的好解决方案 ??????????

标签： css sass styled-components

【解决方案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>

【讨论】：