“前一个兄弟元素选择器”是否存在？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

“前一个兄弟元素选择器”是否存在？

P粉054616867 2023-08-20 13:45:33

[CSS3讨论组]

665

<p>加号选择器 (<code>+</code>) 用于选择下一个相邻的兄弟元素。</p> <p>是否有一个等效的选择器用于选择前一个兄弟元素？</p>

P粉054616867

全部回复(2)

P粉4470021272023-08-21 12:32:47 2楼

我找到了一种方法来为所有前面的兄弟元素（与~相反）添加样式，具体取决于您的需求。

假设您有一个链接列表，当悬停在其中一个链接上时，所有前面的链接都应该变成红色。您可以这样做：

/* 默认链接颜色为蓝色 */
.parent a {
  color: blue;
}

/* 前面的兄弟元素应该是红色的 */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}

<div class="parent">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
</div>

赞 +0

添加回复

P粉9577231242023-08-21 10:52:52 1楼

不，没有“previous sibling”选择器。

在相关的注释中，~是用于一般的后续兄弟选择器（意思是元素在此元素之后，但不一定紧接着之后），它是CSS3选择器。+是用于下一个兄弟选择器，它是CSS2.1。

请参阅来自选择器级别3的相邻兄弟选择器和层叠样式表2.1版修订1（CSS 2.1）规范的相邻兄弟组合器。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>