css同级多个元素需要统一样式怎么办_使用通用兄弟选择器~批量选中

通用兄弟选择器写作“A ~ B”，表示选择A元素之后所有同级且为B类型的兄弟元素，要求A与B有共同父元素，中间可隔其他元素，仅向后匹配。

直接用通用兄弟选择器（~）可以一次性给某元素之后的所有同级兄弟元素统一设置样式，但要注意它只作用于后续的、同层级的、相同父容器下的元素，不包括自身和前面的兄弟元素。

通用兄弟选择器怎么写？

语法很简单：A ~ B 表示：选择所有在 A 元素之后、与 A 同级、且是 B 类型的元素。

• 必须有共同父元素，否则无效
• A 和 B 不必相邻，中间可以隔其他元素
• 只向后匹配，不向前找

实际例子：统一设置标题后所有段落的字体大小

比如页面中有一个

，后面跟着多个

，想让它们字号都变成 16px：

h2 ~ p {
  font-size: 16px;
}

这样，只要是在同一个父容器里、位于该 h2 后面的所有 p 标签，都会被选中——不管中间有没有 div、img 或其他标签。

想选中“某类元素之后的所有同级元素”？用通配符

如果不限定类型，只想对某元素之后所有同级兄弟统一加样式（比如清边距），可以用：

.trigger ~ * {
  margin-top: 0;
}

• * 匹配任意元素，但仅限同级、在 .trigger 后面的那些
• 适合做样式重置或批量微调，但慎用，避免意外覆盖

注意：别和相邻兄弟选择器（+）搞混

A + B 只选紧挨着 A 后面的那一个 B；而 A ~ B 是选所有后面的 B。需要批量时，一定要用 ~，不是 +。