相鄰兄弟選擇器用+表示，用于選中緊接在另一個同級元素后的元素。例如：h2 + p { color: red; } 只有第一個
會被選中，因其緊跟
且同級；常見場景包括標題后段落樣式、表單提示信息、列表項微調；使用技巧涵蓋控制間距、配合隱藏元素、避免重復類名；注意事項包含僅作用于緊鄰下一個兄弟、必須同級、不支持向前查找；反例中
是.box子元素，故選擇器無效。掌握其規則可減少冗余class并提升樣式控制精度。
css 中的相鄰兄弟選擇器（Adjacent Sibling Selector）是一個非常實用但容易被忽視的選擇器。它允許你選中緊接在另一個元素之后的某個元素，前提是這兩個元素是同級的。這個選擇器用加號 + 表示。
比如，你想讓一個標題后面緊跟著的段落文字樣式不同，就可以使用相鄰兄弟選擇器來實現。
如何正確書寫相鄰兄弟選擇器
相鄰兄弟選擇器的基本語法是：
立即學習“前端免費學習筆記（深入）”；
element1 + element2 { styles... }
其中，element1 和 element2 必須是同級元素，并且 element2 必須緊跟在 element1 后面。如果中間夾了其他任何元素，就不會生效。
舉個例子：
<h2>標題</h2> <p>這個段落會被選中</p> <p>這個段落不會被選中</p>
對應的 CSS：
h2 + p { color: red; }
在這個例子中，第一個
是
的“下一個兄弟”，所以顏色會變紅；而第二個
雖然是兄弟，但不是緊挨著
，所以不受影響。
常見使用場景和技巧
相鄰兄弟選擇器非常適合用來處理頁面結構中有固定順序的元素組合。例如：
- 標題后緊跟的段落樣式不同
- 表單中某個特定輸入框后的提示信息
- 列表中某些特殊項的樣式微調
實際應用小技巧：
- 控制默認間距：有時候兩個模塊之間的空白區域可以通過相鄰兄弟選擇器精確控制。
- 配合隱藏元素使用：比如當某個元素被折疊或隱藏時，后面的元素可能需要調整邊距。
- 避免重復類名：不用額外添加 class，直接通過結構關系控制樣式。
容易踩坑的地方
雖然這個選擇器很好用，但也有一些常見的誤區需要注意：
- 它只作用于“緊鄰”的下一個兄弟，不能跨多個元素。
- 兩個元素必須是同級，不能一個是父元素，一個是子元素。
- 不支持向前查找，只能往后找下一個兄弟。
舉個反例：
<div class="box"> <p>我是 box 里的段落</p> </div> <span>我是 span</span>
如果你寫：
.box + p { ... }
這段代碼是不會起作用的，因為
是 .box 內部的子元素，而不是它的兄弟。
結語
相鄰兄弟選擇器在做頁面細節樣式控制時非常有用，尤其是當你希望根據結構關系來定義樣式的時候。只要注意它是“緊鄰”且“同級”的限制，就能很好地發揮它的作用。
基本上就這些，不復雜但很容易忽略一些細節。掌握好了，在寫樣式時能少寫不少 class，也能更清晰地表達結構與樣式的對應關系。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
