接续兄弟组合器

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

语法

css
former_element + target_element { style properties }

示例

CSS

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

HTML

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

结果

规范

Specification
Selectors Level 4
# adjacent-sibling-combinators

浏览器兼容性

BCD tables only load in the browser

参见