相鄰兄弟選擇器(Adjacent sibling selector)可選擇緊接在另一元素後的元素,且二者有相同父元素。
選擇鄰近兄弟 ( 建議學習:CSS教學 )
如果如果需要選擇緊接在另一個元素後的元素,而且另一個元素後的元素,而且另一個元素者有相同的父元素,可以使用相鄰兄弟選擇器(Adjacent sibling selector)。
例如,如果要增加緊接在h1 元素後出現的段落的上邊距,可以這樣寫:
<!DOCTYPE HTML> <html> <head> <style type="text/css"> h1 + p {margin-top:50px;} </style> </head> <body> <h1>This is a heading.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> </body> </html>
這個選擇器讀作:「選擇緊接在h1 元素後出現的段落,h1 和p 元素擁有共同的父元素」。
語法解釋:
相鄰兄弟選擇器使用了加號( ),即相鄰兄弟結合符(Adjacent sibling combinator)。
註解:與子結合符一樣,相鄰兄弟結合符旁邊可以有空格符。
請看下面這個文檔樹片段:
<div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </div>
在上面的片段中,div 元素中包含兩個列表:一個無序列表,一個有序列表,每個列表都包含三個列表項目。這兩個列表是相鄰兄弟,列表項目本身也是相鄰兄弟。
不過,第一個清單中的清單項目與第二個清單中的清單項目並非相鄰兄弟,因為這兩組清單項目不屬於同一父元素(最多只能算堂兄弟)。
請記住,用一個結合符只能選擇兩個相鄰兄弟中的第二個元素。請看下面的選擇器:
li + li {font-weight:bold;}
上面這個選擇器只會把清單中的第二個和第三個清單項目變成粗體。第一個列表項不受影響。
以上是CSS的相鄰兄弟選擇器何時用的詳細內容。更多資訊請關注PHP中文網其他相關文章!