CSS3中的兄弟選擇器指在選擇某個(gè)元素的同時(shí),選擇其指定兄弟元素的樣式。這種選擇器采用加號(hào)(+)來(lái)表示,具體使用方法如下:
選擇器1 + 選擇器2 { 樣式代碼 }
其中,選擇器1和選擇器2分別表示的是要選擇的兄弟元素。+表示的是選擇器1之后的兄弟元素,也就是相鄰的下一個(gè)兄弟元素。
舉個(gè)例子:
/* 選擇id為first的元素之后相鄰的下一個(gè)div元素 */ #first + div { background-color: blue; }
上述例子表示的是選擇id為first的元素之后相鄰的下一個(gè)div元素,并將其背景顏色設(shè)置為藍(lán)色。
需要注意的是,這種選擇器只會(huì)選擇一個(gè)元素,即選擇器1之后的第一個(gè)兄弟元素,如果要選擇多個(gè)兄弟元素,需要使用其他選擇器。
另外,這種選擇器還有一種比較特別的情況,即選擇器1本身就是選擇器2的兄弟元素,那么這種情況下也會(huì)應(yīng)用樣式。例如:
/* 選擇id為first的元素之后相鄰的下一個(gè)p元素 */ #first + p { color: red; }這是相鄰的下一個(gè)p元素
這個(gè)p元素不會(huì)被應(yīng)用樣式
上述例子中,選擇id為first的元素之后相鄰的下一個(gè)元素是一個(gè)p元素,所以被應(yīng)用了樣式。而第二個(gè)p元素不會(huì)被應(yīng)用樣式,因?yàn)樗皇堑谝粋€(gè)相鄰的p元素。
上一篇css3的has選擇
下一篇css3百分比高度