CSS的相鄰兄弟選擇器何時用
- (*-*)浩原創
- 2019-12-30 16:16:433181瀏覽
相鄰兄弟選擇器（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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn