在CSS中,兄弟元素指的是在同一層級中,緊挨著的兩個元素。兄弟元素定位就是用CSS讓這兩個元素相互影響,實現一些特定的效果。
/* 兄弟選擇器 */ elem1 ~ elem2 { /* 樣式屬性 */ } /* 相鄰兄弟選擇器 */ elem1 + elem2 { /* 樣式屬性 */ }
兄弟選擇器使用“~”符號,表示選擇所有在elem1后面的同級元素elem2。例如:
/* 選擇所有在p元素后面的同級并且是第二個元素的div元素 */ p ~ div:nth-of-type(2) { /* 樣式屬性 */ }
此外,還有相鄰兄弟選擇器,使用“+”符號。它只選擇elem1后面的一個同級元素elem2。例如:
/* 選擇緊接著p元素后面的div元素 */ p + div { /* 樣式屬性 */ }
需要注意的是,兄弟元素選擇器只能選擇同一層級中的元素,不能選擇嵌套層級中的元素。