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

显示悬停div之后的所有p，而不仅仅是之后的第一个。{/ p>

如何在悬停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>

Answer 2

没有＆＃34;第一兄弟＆＃34;选择器，但您可以使用this answer中描述的相同技术覆盖后续div元素的样式：

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

p:hover ~ div {
    display: block;
}

如果您不知道可以提前分隔p元素的div元素的最大数量，或者您不希望硬编码所需的所有相邻选择器，如Aaron＆回答。

Answer 3

您是否尝试过使用此功能：

＆＃13;

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

＆＃13;

<p>lorem</p>
<p>lorem</p>
<p>lorem</p>

<div>Ipsum</div>

<p>lorem</p>
<p>lorem</p>
<p>lorem</p>

<div>Ipsum</div>

＆＃13;

Answer 4

我会将块放在节标签之间。然后<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;}

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

4 个答案: