CSS選擇器中除了常見的id、class、標簽選擇器外,還有一種十分實用的選擇器——兄弟選擇器(Sibling Selector)。
div + p { background-color: yellow; }
這樣的選擇器可以選擇緊接在某個標簽后的兄弟標簽,上面的例子就表示將選中每個div之后緊接著的一個p標簽,并將其背景設為黃色。
除了“+”號外,還有一種兄弟選擇器是“~”號:
div ~ p { background-color: yellow; }
這種選擇器表示選擇與某個標簽相鄰的所有兄弟標簽,上面的例子中將為每個div之后的所有p標簽都設置背景色。
需要注意的是,兄弟選擇器只會選擇后面的兄弟元素,不會選擇前面的。除此之外,兄弟選擇器還可以和其他的選擇器結合使用,添加更多的限制條件。
總的來說,在使用CSS時,兄弟選擇器不僅能為頁面加入更多的樣式效果,還可以提高頁面的標簽語義化,讓頁面的設計更加簡潔實用。
上一篇css選擇器優先嗎