html - CSS:如何只选择元素之后的第一个非相邻兄弟

Question

我有一个这样的 HTML 页面:

 <p></p>
 <p></p>
 <p></p>

 <div></div>

 <p></p>
 <p></p>
 <p></p>

 <div></div>

这种模式还在继续。

通常 div 元素不应该这样显示:

div{display:none;}

但是当一个段落悬停时，应该显示其后的第一个 div 元素:

p:hover+div{display:block;}

但这只适用于之前的 p 。还有这个:

p:hover~div{display:block;}

在悬停的 p 之后显示所有 div 而不仅仅是之后的第一个。

我怎样才能只显示悬停在 p 之后的第一个不相邻的 div？

here is the demo

实际上我正在寻找一个像 first-sibling 这样的选择器。

Answer 1

您应该使用以下设置:

p:hover ~ div ~ div {
    display:none;
}

这会将悬停段落后面的第一个 div 之后的所有 div 的显示设置回无。

div {
  display: none;
}
p:hover ~ div {
  display: block;
}
p:hover ~ div ~ div {
  display: none;
}

<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>d1</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>d2</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>d3</div>