我找到了一種方法來為所有先前的兄弟元素(與~
相反)設(shè)定樣式,這取決於您的需求。
假設(shè)您有一個(gè)連結(jié)列表,當(dāng)懸停在其中一個(gè)連結(jié)上時(shí),所有先前的連結(jié)都應(yīng)該變成紅色。您可以這樣做:
/* 默認(rèn)鏈接顏色為藍(lán)色 */ .parent a { color: blue; } /* 先前的兄弟元素應(yīng)為紅色 */ .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>
不,沒有「前一個(gè)兄弟選擇器」。
相關(guān)的是,~
是用於一般的後繼兄弟選擇器(意味著元素在此元素之後,但不一定緊跟著),是一個(gè)CSS3選擇器。
是用於下一個(gè)兄弟選擇器,是CSS2.1。
請(qǐng)參閱來自Selectors Level 3的相鄰兄弟選擇器和來自Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification的5.7 相鄰兄弟選擇器。