标题重写为:是否存在'前一个兄弟选择器”?
P粉262113569
P粉262113569 2023-08-20 12:54:00
0
2
421
<p>加号选择器 (<code>+</code>) 用于选择下一个相邻的兄弟元素。</p> <p>是否有一个等效的选择器用于选择前一个兄弟元素?</p>
P粉262113569
P粉262113569

全部回复(2)
P粉969253139

我找到了一种方法来为所有前一个兄弟元素(与 ~ 相反)添加样式,这取决于你的需求。

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

/* 默认链接颜色是蓝色 */
.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>
P粉797855790

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

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

请参阅来自Selectors Level 3相邻兄弟选择器和来自Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification5.7 相邻兄弟选择器

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!