CSS:如何仅选择元素后面的第一个非相邻兄弟

我有一个像这样的HTML页面:

这种模式还在继续.

通常,div元素不应显示为:

div{display:none;}

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

p:hover+div{display:block;}

但这只适用于以前的p.还有这个:

p:hover~div{display:block;}

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

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

这是演示

其实我正在寻找一个选择器first-sibling.

您应该使用以下设置:

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

这将在悬停段落的第div一个之后将显示设置为无div.

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

p1
p2
p3
d1
p1
p2
p3
d2
p1
p2
p3
d3