通用兄弟选择器写作“A ~ B”，表示选择A元素之后所有同级且为B类型的兄弟元素，要求A与B有共同父元素，中间可隔其他元素，仅向后匹配。
直接用通用兄弟选择器（~）可以一次性给某元素之后的所有同级兄弟元素统一设置样式，但要注意它只作用于后续的、同层级的、相同父容器下的元素，不包括自身和前面的兄弟元素。
通用兄弟选择器怎么写？
语法很简单：A ~ B 表示：选择所有在 A 元素之后、与 A 同级、且是 B 类型的元素。
- 必须有共同父元素，否则无效
- A 和 B 不必相邻，中间可以隔其他元素
- 只向后匹配，不向前找
实际例子：统一设置标题后所有段落的字体大小
比如页面中有一个 <h2></h2>，后面跟着多个 <p></p>，想让它们字号都变成 16px：
h2 ~ p {
font-size: 16px;
}这样，只要是在同一个父容器里、位于该 h2 后面的所有 p 标签，都会被选中——不管中间有没有 div、img 或其他标签。
立即学习“前端免费学习笔记（深入）”；
想选中“某类元素之后的所有同级元素”？用通配符
如果不限定类型，只想对某元素之后所有同级兄弟统一加样式（比如清边距），可以用：
.trigger ~ * {
margin-top: 0;
}- * 匹配任意元素，但仅限同级、在 .trigger 后面的那些
- 适合做样式重置或批量微调，但慎用，避免意外覆盖
注意：别和相邻兄弟选择器（+）搞混
A + B 只选紧挨着 A 后面的那一个 B；而 A ~ B 是选所有后面的 B。需要批量时，一定要用 ~，不是 +。
