此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

相邻兄弟选择器

相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

/* 图片后面紧跟着的段落将被选中 */
img + p {
  font-weight: bold;
}

语法

former_element + target_element { style properties }

示例

CSS

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

HTML

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

结果

  • One
  • Two!
  • Three

规范

规范 状态 备注
Selectors Level 4
next-sibling combinator		 Working Draft 重命名为： "next-sibling" combinator。
Selectors Level 3
Adjacent sibling combinator		 Recommendation
CSS Level 2 (Revision 1)
Adjacent sibling selectors		 Recommendation 初始定义。

浏览器兼容性

BCD tables only load in the browser

参阅