接续兄弟组合器

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Next-sibling combinator (A + B)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见