~兄弟选择器

语法

表示选择 A 元素后的所有 B 元素，但是 A 和 B 必须有 相同的父元素

A ~ B

例子

选中 h3 标签后面，所有的 h5 标签，且这些 h5 标签与 h3 标签有同一个父元素（div）

<style>
h3~h5{
    color: red;
}
</style>

<div>
    <div>
        <h3>我是第1行</h3>
        <h5>我是第2行</h5>
        <h4>我是第3行</h4>
        <h5>我是第4行</h5>
    </div>
    <h4>我是第5行</h4>
    <h5>我是第6行</h5>
</div>

执行结果：我是第2行 和 我是第4行 是红色

紧邻兄弟组合器

语法

表示选择紧邻在 A 元素后面的 B 元素，且 A 和 B 必须拥有 相同的父元素，所选到的 仅为一个B元素

A + B

例子

选中 h3 标签后面，紧邻的 h5 标签，且该 h5 标签与 h3 标签有同一个父元素（div）

<style>
h3+h5{
    color: red;
}
</style>

<div>
    <div>
        <h3>我是第1行</h3>
        <h5>我是第2行</h5>
        <h4>我是第3行</h4>
        <h5>我是第4行</h5>
    </div>
    <h4>我是第5行</h4>
    <h5>我是第6行</h5>
</div>

执行结果：我是第2行 是红色

参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_selectors
https://blog.csdn.net/amnesiac666/article/details/122060057

原文出处：/show_1GWHFHIoM5L.html