我找到了一种方法来为所有先前的兄弟元素(与~相反)设置样式,这取决于您的需求。
~
假设您有一个链接列表,当悬停在其中一个链接上时,所有先前的链接都应该变成红色。您可以这样做:
/* 默认链接颜色为蓝色 */ .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>
不,没有“前一个兄弟选择器”。
相关的是,~ 是用于一般的后继兄弟选择器(意味着元素在此元素之后,但不一定紧随其后),是一个CSS3选择器。 + 是用于下一个兄弟选择器,是CSS2.1。
+
请参见来自Selectors Level 3的相邻兄弟选择器和来自Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification的5.7 相邻兄弟选择器。
我找到了一种方法来为所有先前的兄弟元素(与
~
相反)设置样式,这取决于您的需求。假设您有一个链接列表,当悬停在其中一个链接上时,所有先前的链接都应该变成红色。您可以这样做:
不,没有“前一个兄弟选择器”。
相关的是,
~
是用于一般的后继兄弟选择器(意味着元素在此元素之后,但不一定紧随其后),是一个CSS3选择器。+
是用于下一个兄弟选择器,是CSS2.1。请参见来自Selectors Level 3的相邻兄弟选择器和来自Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification的5.7 相邻兄弟选择器。