Posted on 2011-05-28 21:18
RTY 閱讀(202)
評(píng)論(0) 編輯 收藏 引用 所屬分類(lèi):
CSS
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。
選擇相鄰兄弟
如果需要選擇緊接在另一個(gè)元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。
例如，如果要增加緊接在 h1 元素后出現(xiàn)的段落的上邊距，可以這樣寫(xiě)：
h1 + p {margin-top:50px;}這個(gè)選擇器讀作：“選擇緊接在 h1 元素后出現(xiàn)的段落，h1 和 p 元素?fù)碛泄餐母冈?#8221;。
親自試一試
語(yǔ)法解釋
相鄰兄弟選擇器使用了加號(hào)（+），即相鄰兄弟結(jié)合符（Adjacent sibling combinator）。
注釋?zhuān)?/span>與子結(jié)合符一樣，相鄰兄弟結(jié)合符旁邊可以有空白符。
請(qǐng)看下面這個(gè)文檔樹(shù)片段：
<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 元素中包含兩個(gè)列表：一個(gè)無(wú)序列表，一個(gè)有序列表，每個(gè)列表都包含三個(gè)列表項(xiàng)。這兩個(gè)列表是相鄰兄弟，列表項(xiàng)本身也是相鄰兄弟。不過(guò)，第一個(gè)列表中的列表項(xiàng)與第二個(gè)列表中的列表項(xiàng)不是相鄰兄弟，因?yàn)檫@兩組列表項(xiàng)不屬于同一父元素（最多只能算堂兄弟）。
請(qǐng)記住，用一個(gè)結(jié)合符只能選擇兩個(gè)相鄰兄弟中的第二個(gè)元素。請(qǐng)看下面的選擇器：
li + li {font-weight:bold;}上面這個(gè)選擇器只會(huì)把列表中的第二個(gè)和第三個(gè)列表項(xiàng)變?yōu)榇煮w。第一個(gè)列表項(xiàng)不受影響。
親自試一試
結(jié)合其他選擇器
相鄰兄弟結(jié)合符還可以結(jié)合其他結(jié)合符：
html > body table + ul {margin-top:20px;}這個(gè)選擇器解釋為：選擇緊接在 table 元素后出現(xiàn)的所有兄弟 ul 元素，該 table 元素包含在一個(gè) body 元素中，body 元素本身是 html 元素的子元素。