CSS 关系选择器 ~ 后续兄弟选择器

后续兄弟选择器 Subsequent-sibling combinator

符号：~，使用波浪号表示后续兄弟选择器。

The subsequent-sibling combinator (~, a tilde) separates two selectors and matches all instances of the second element that follow the first element (not necessarily immediately) and share the same parent element.

后续兄弟选择器（~）将两个选择器分开，并匹配第二个选择器的所有迭代元素，位置无须紧邻于第一个元素，只须有相同的父级元素。

作用

与第一选择器是同级元素的满足第二选择器的所有元素，不用相邻。

示例

所有与h1同级的p元素颜色都为blue。

h1 ~ p {
    color: blue;
}

<h1>标题</h1>
<p>123</p>
<div>666</div>
<p>456</p>

参考文档

https://developer.mozilla.org/en-US/docs/Web/CSS/Subsequent-sibling_combinator