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;}

显示所有divs后徘徊p不仅仅是第一个后.

如何在悬停后只显示第一个不相邻的div p？

这是演示

其实我正在寻找一个选择器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>