Heim > Fragen und Antworten > Hauptteil
P粉4470021272023-08-21 12:32:47
我找到了一种方法来为所有前面的兄弟元素(与~
相反)添加样式,具体取决于您的需求。
假设您有一个链接列表,当悬停在其中一个链接上时,所有前面的链接都应该变成红色。您可以这样做:
/* 默认链接颜色为蓝色 */ .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粉9577231242023-08-21 10:52:52
不,没有“previous sibling”选择器。
在相关的注释中,~
是用于一般的后续兄弟选择器(意思是元素在此元素之后,但不一定紧接着之后),它是CSS3选择器。+
是用于下一个兄弟选择器,它是CSS2.1。
请参阅来自选择器级别3的相邻兄弟选择器和层叠样式表2.1版修订1(CSS 2.1)规范的相邻兄弟组合器。