CSS 鄰接同層選取器 +：只選緊接的下一個兄弟

因為兩個元素之間插進了其他元素。加號要求兩者緊鄰，中間只要多一個標籤就不再符合條件；純文字與註解則不影響。

使用 + 區隔兩個元素，選取 HTML 文件上某個元素同層且位於其後的一個兄弟元素。

以下案例便是利用 鄰接同層選取器 將對象選取出來並進行樣式的改變。

常見應用

css

/* 連續段落之間才加間距，第一段不加 */
p + p {
  margin-top: 1em;
}

/* 欄位後面緊接的錯誤訊息 */
input:invalid + .error-message {
  display: block;
}

第一個寫法可以避免邊界重疊帶來的困擾，也不必替第一段另外寫規則。

小提醒

兩個元素之間只要插進任何一個標籤，+ 就不再成立。純文字與註解則不影響判定。

為什麼樣式突然失效了？

因為兩個元素之間插進了其他元素。+ 要求兩者緊鄰，中間只要多一個標籤就不再符合條件；純文字與註解則不影響。

它常用在什麼地方？

處理相鄰元素之間的間距，例如：標題後的第一段、連續段落之間的距離，也常用於欄位與它後面的錯誤訊息。

可以連續使用多個加號嗎？

可以，代表往後數第幾個兄弟。不過寫長了不易閱讀，多數情況用結構性偽類會更清楚。