# CSS 相鄰兄弟選擇器 **相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。** ## 選擇相鄰兄弟 如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。 例如，如果要增加緊接在 h1 元素后出現的段落的上邊距，可以這樣寫： ``` h1 + p {margin-top:50px;} ``` 這個選擇器讀作：“選擇緊接在 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;} ``` 上面這個選擇器只會把列表中的第二個和第三個列表項變為粗體。第一個列表項不受影響。 ## 結合其他選擇器 相鄰兄弟結合符還可以結合其他結合符： ``` html > body table + ul {margin-top:20px;} ``` 這個選擇器解釋為：選擇緊接在 table 元素后出現的所有兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素。