紧邻兄弟组合器 Adjacent sibling combinator

Docs

紧邻兄弟组合器 Adjacent sibling combinator：+ 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。

语法：A + B
例子：h2 + p 会匹配所有紧邻在 <h2> 元素后的 <p> 元素。

紧邻兄弟组合器 Adjacent sibling combinator
/* 图片后面紧跟着的段落将被选中 */
img + p {
  font-weight: bold;
}

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

HTML
CSS

<div class="adjacent-sibling-combinator-demo1">
  <h2> 相邻兄弟选择器 + </h2>
  <ul>
    <li>One</li>
    <li>Two!</li>
    <li>Three</li>
  </ul>
</div>
<div class="adjacent-sibling-combinator-demo2">
  <h2> 普遍兄弟选择器 ~ </h2>
  <ol>
    <li>One</li>
    <li>Two!</li>
    <li>Three!</li>
  </ol>
</div>

.adjacent-sibling-combinator-demo1 li:first-of-type + li {
  color: darkviolet;
}

.adjacent-sibling-combinator-demo2 li:first-of-type ~ li {
  color: darkorange;
}

http://localhost:3000/css-adjacent-sibling-combinator.html

相邻兄弟选择器 +

One
Two!
Three

普遍兄弟选择器 ~

One
Two!
Three!