84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
加號選擇器( )用於選擇下一個相鄰的兄弟。
上一個兄弟姊妹有等效的嗎?
我找到了一種方法來設計所有先前的同級(與 ~ 相反)的樣式,該方法可能會根據您的需求而起作用。
~
假設您有一個連結列表,當滑鼠懸停在其中一個連結上時,之前的所有連結都應變為紅色。你可以這樣做:
/* default link color is blue */ .parent a { color: blue; } /* prev siblings should be red */ .parent:hover a { color: red; } .parent a:hover, .parent a:hover ~ a { color: blue; }
<div class="parent"> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> </div>
不,沒有「前一個兄弟」選擇器。
與此相關的是,~ 用於一般後繼同級元素(表示該元素位於該元素之後,但不一定緊接在後),並且是一個 CSS3 選擇器。 代表下一個兄弟,是 CSS2.1。
請參閱相鄰同級組合器 "http://www.w3.org/TR/css3-selectors/" rel="noreferrer">選擇器等級3 和5.7 相鄰同級選擇器 來自層疊樣式表2 級修訂版1 (CSS 2.1) 規範。
我找到了一種方法來設計所有先前的同級(與
~
相反)的樣式,該方法可能會根據您的需求而起作用。假設您有一個連結列表,當滑鼠懸停在其中一個連結上時,之前的所有連結都應變為紅色。你可以這樣做:
不,沒有「前一個兄弟」選擇器。
與此相關的是,
代表下一個兄弟,是 CSS2.1。
~
用於一般後繼同級元素(表示該元素位於該元素之後,但不一定緊接在後),並且是一個 CSS3 選擇器。請參閱相鄰同級組合器 "http://www.w3.org/TR/css3-selectors/" rel="noreferrer">選擇器等級3 和5.7 相鄰同級選擇器 來自層疊樣式表2 級修訂版1 (CSS 2.1) 規範。