相鄰兄弟組合器

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

相鄰兄弟組合器 (+) 分隔兩個選擇器，僅當第二個元素緊跟在第一個元素之後，並且兩者都是同一父 element 的子元素時，才匹配第二個元素。

css

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

語法

css

/* The white space around the + combinator is optional but recommended. */
former_element + target_element { style properties }

此示例演示如何選擇特定型別的下一個兄弟元素。

我們只為緊跟在其型別中第一個 <li> 之後的 <li> 設定樣式

css

li:first-of-type + li {
  color: red;
  font-weight: bold;
}

html

<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

相鄰兄弟組合器可以包含在 :has() 函式式選擇器中，以選擇上一個兄弟元素。

我們只為具有下一個兄弟元素（即其型別中最後一個 <li>）的 <li> 設定樣式

css

li:has(+ li:last-of-type) {
  color: red;
  font-weight: bold;
}

html

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three!</li>
  <li>Four</li>
</ul>

規範
選擇器 Level 4 # 相鄰兄弟組合器

此頁面由 MDN 貢獻者於 2025 年 7 月 14 日最後修改。