CSS: 如何 select 仅在元素之后的第一个非相邻兄弟

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

你试过用这个吗：

div {
  display: none;
  background: blue;
  color: #fff;
}
p:hover+div,
p:hover+p+div,
p:hover+p+p+div {
  display: block;
}

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

<div>Ipsum</div>

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

<div>Ipsum</div>

Answer 2

您应该使用以下设置：

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

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

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>

Answer 3

我会把你的块放在章节标签之间。那么 <p> 标签和 <div> 标签是同一个元素的兄弟。此外，如果这些标签彼此属于彼此，那么在您的标记中反映这一点也很好。

JSFIDDLE DEMO

<section>
 <p>hello</p>
 <p>world</p>
 <p>bar</p>

 <div></div>
</section>

<section>
 <p>hello</p>
 <p>world</p>
 <p>bar</p>

 <div></div>
</section>

css

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

Answer 4

没有 "first-sibling" 选择器，但您可以使用 this answer:

中描述的相同技术覆盖后续 div 元素的样式

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

p:hover ~ div {
    display: block;
}

如果您事先不知道可以分隔 div 个元素的 p 个元素的最大数量，或者您不想像所示那样硬编码所有必要的相邻选择器，那么这是首选在亚伦的回答中。

CSS: 如何 select 仅在元素之后的第一个非相邻兄弟

CSS: How to select only the first non-adjacent sibling after the element

html

css

css-selectors