溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。
選擇相鄰兄弟
如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。
例如，如果要增加緊接在 h2 元素后出現的段落的上邊距，可以這樣寫：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h2 + p {margin-top:50px;}
</style>
</head>
<body>
<h2>This is a heading.</h2>
<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>這個選擇器讀作：“選擇緊接在 h2 元素后出現的段落，h2 和 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的相鄰兄弟選擇器何時用的詳細內容，更多請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
