具有特定ID的元素的同级CSS隐藏样式

Question

我试图隐藏具有特定ID的元素之后的兄弟1和2，我认为代码看起来像这样：

div[id*="pop_up"] + class{
  display: none !important; 
}

但是，这似乎不起作用，我不确定在这种情况下我将如何使用同级组合。

Answer 1

您的选择器将只隐藏具有指定类的第一个兄弟姐妹。如果要删除第一个和第二个兄弟姐妹，则需要以下内容：

div[id*="pop_up"] + .hide-me, 
div[id*="pop_up"] + .hide-me + .hide-me {
  display: none !important; 
}

<div id="pop_up1"></div>

<p class="hide-me">Hide me!</p>
<p class="hide-me">Hide me!</p>

或者，您可以使用常规同级选择器，但是这将导致具有指定类的all同级被隐藏。例如：

div[id*="pop_up"] ~ .hide-me {
  display: none !important; 
}

<div id="pop_up1"></div>

<p class="hide-me">Hide me!</p>
<p class="hide-me">Hide me!</p>
<p class="hide-me">Hide me!</p>

如果您不想添加选择器ad infinitum，如第一个代码片段所示，则可以将~选择器与nth-child结合使用，如下所示：

div[id*="pop_up"] ~ .hide-me:nth-child(-n+3) {
   display: none !important; 
}

<div id="pop_up1"></div>

<p class="hide-me">Hide me 1!</p>
<p class="hide-me">Hide me 2!</p>
<p class="hide-me">Hide me 3!</p>
<p class="hide-me">Hide me 4!</p>
<p class="hide-me">Hide me 5!</p>

Answer 2

我希望下面是您想要的。

div#pop_up + *,
div#pop_up + * + * {
  display: none;
}

<div id="pop_up"> Pop Up </div>
<h1> sibling 1</h1>
<p> sibling 2</p>
<div> sibling 3</div>