扫码关注官方订阅号
我找到了一种方法来为所有前一个兄弟元素（与 ~ 相反）添加样式，这取决于你的需求。
~
假设你有一个链接列表，当悬停在其中一个链接上时，所有前面的链接都应该变成红色。你可以这样做：
/* 默认链接颜色是蓝色 */ .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>
不，没有“previous sibling”选择器。
在相关的注释中，~是用于一般的后继兄弟选择器（意思是元素在此元素之后，但不一定紧接着），是CSS3选择器。+是用于下一个兄弟选择器，是CSS2.1。
+
请参阅来自Selectors Level 3的相邻兄弟选择器和来自Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification的5.7 相邻兄弟选择器。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
2
581
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
我找到了一种方法来为所有前一个兄弟元素（与
~相反）添加样式，这取决于你的需求。假设你有一个链接列表，当悬停在其中一个链接上时，所有前面的链接都应该变成红色。你可以这样做：
/* 默认链接颜色是蓝色 */ .parent a { color: blue; } /* 前一个兄弟元素应该是红色 */ .parent:hover a { color: red; } .parent a:hover, .parent a:hover ~ a { color: blue; }不，没有“previous sibling”选择器。
在相关的注释中，
~是用于一般的后继兄弟选择器（意思是元素在此元素之后，但不一定紧接着），是CSS3选择器。+是用于下一个兄弟选择器，是CSS2.1。请参阅来自Selectors Level 3的相邻兄弟选择器和来自Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification的5.7 相邻兄弟选择器。