【CSS兄弟选择器】

最近写项目时，发现使用兄弟选择器频繁，特此总结一下常用的兄弟选择器，我常用于如果A存在，则给B加特定样式，若A不存在，B是其它样式的情况，使用兄弟选择器很方便，供参考。

html:
<div>
    <h2>标题部分</h2>
    <p>111</p>
    <p>222</p>
    <p class="on">333</p>
</div>

- 兄弟选择器 “+”

表示某元素后相邻的兄弟元素，也就是紧挨着的，选中的是单个的
选中h2下面的第一个p ： h2+p{ }

- 兄弟选择器 “~”

表示某元素后所有同级的指定元素，选中的是所有的
选中h2下面的所有p ： h2~p{ }

- 如果想选中特定兄弟元素需要"~" 和 “.类名” 搭配使用

选中h2下面的类名为on的元素 ： h2~.on{ }