相邻兄弟组合器

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 日最后修改。