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？

这里有演示

其实我正在寻找像first-sibling这样的选择器。

- Ormoz

---

我不确定我是否理解了这个查询。您是否正在寻找一种方法来仅显示紧随“p”标记后的第一个“div”？我不确定我的答案是否符合您的需求。 - Harry

@Harry 谢谢，你的答案就是解决方案 :) - Ormoz

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>

- Harry

---

抱歉，没意识到你已经回答了这个问题但是删除了它。 - BoltClock

@BoltClock：没关系，老兄。我一直在删除/恢复它，是因为(a)不确定是否需要和(b)系统问题导致的我的错误。 - Harry

这似乎是基于已知的有限HTML结构的最佳答案。 - Paulie_D

非常优雅！我给你点赞。 - Aaron

Answer 2

你尝试使用过这个吗：

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>

- Aaron

---

如果实际结构仅包含4个段落和一个div，则非常有用，否则它将非常不灵活。 - Paulie_D

但是楼主说这个会遵循那个结构？ - Aaron

实际上他说的是“像”这样……而不是精确的结构。如果有12个段落，然后是一个div，你会有很多+p语句。我并不是说你的答案是错的……只是它有限。 - Paulie_D

我曾想过是否有类似于first-sibling-after的选择器，有这样的东西吗？ - Ormoz

@Aaron：你不能真正责怪他。太多时候，我们回答问题，只是为了让提问者稍后以一种使答案无效的方式更改他们的标记，因为我们对原始标记做出了太多的假设。 - BoltClock

Answer 3

没有“第一个兄弟选择器”，但您可以使用与这个答案描述的相同技术来覆盖后续的div元素样式。

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

p:hover ~ div {
    display: block;
}

如果您不知道可以在预先分离

元素的p元素的最大数量，或者您宁愿不必像Aaron的回答中所示那样硬编码所有必要的相邻选择器，则应首选此方法。

- BoltClock

---

非常感谢。实际上，目前已知div之间的段落数量，但谁知道呢？也许在未来HTML会发生变化，因此我更喜欢这个通用答案。 - Ormoz

Answer 4

我会将您的块放置在section标签之间。然后，<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;}

- kasper Taeymans