通用兄弟选择器写作“A ~ B”，表示选择A元素之后所有同级且为B类型的兄弟元素，要求A与B有共同父元素，中间可隔其他元素，仅向后匹配。
直接用通用兄弟选择器（~）可以一次性给某元素之后的所有同级兄弟元素统一设置样式，但要注意它只作用于后续的、同层级的、相同父容器下的元素，不包括自身和前面的兄弟元素。
语法很简单：A ~ B 表示：选择所有在 A 元素之后、与 A 同级、且是 B 类型的元素。
比如页面中有一个 <h2></h2>，后面跟着多个 <p></p>，想让它们字号都变成 16px：
h2 ~ p {
font-size: 16px;
}这样，只要是在同一个父容器里、位于该 h2 后面的所有 p 标签，都会被选中——不管中间有没有 div、img 或其他标签。
立即学习“前端免费学习笔记（深入）”；
如果不限定类型，只想对某元素之后所有同级兄弟统一加样式（比如清边距），可以用：
.trigger ~ * {
margin-top: 0;
}A + B 只选紧挨着 A 后面的那一个 B；而 A ~ B 是选所有后面的 B。需要批量时，一定要用 ~，不是 +。
以上就是css同级多个元素需要统一样式怎么办_使用通用兄弟选择器~批量选中的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
706
收藏
取消收藏
