下一个兄弟选择器

**next-sibling 组合器**（`+`）将两个选择器分开，仅匹配第二个元素，前提是它紧随第一个元素，并且两者都是相同父级 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 }

示例

基本用法

此示例演示如何选择下一个兄弟元素，如果该下一个兄弟元素是特定类型。

CSS

我们只对紧接在第一个类型相同的 <li> 元素之后的 <li> 元素进行样式化

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

HTML

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

结果

选择上一个兄弟元素

next-sibling 组合器可以包含在 :has() 功能选择器中以选择上一个兄弟元素。

CSS

我们只对具有下一个兄弟元素的 <li> 元素进行样式化，该兄弟元素是最后一个类型相同的 <li> 元素

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

HTML

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

结果

规范

规范
选择器级别 4
# adjacent-sibling-combinators

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅