波浪号 ~ 是通用兄弟选择器，只匹配同级且位于前驱元素之后的所有后续兄弟元素，不选前面、子元素或跨层级元素；如 h2 ~ p 仅选同一父容器中 h2 后的所有同级 p 元素。
波浪号 ~ 是通用兄弟选择器，只选“后面”的同级元素
它不会选前面的、不会选子元素、也不会跨层级。比如 h2 ~ p 只匹配在同一个父容器里、出现在 h2 元素**之后**的所有 p 元素，且二者必须是同级。
- 常见错误：以为
~能选嵌套在后面的子元素（比如h2 ~ div p中的p），其实它只管第一层同级关系，后续路径由空格决定 - 使用场景：做文档流中“标题后跟多个说明段落”的样式统一，或表单里某提示项出现后，高亮它后面所有同类错误提示
- 注意兼容性：IE7+ 支持，但 IE6 不支持——如果还要兼容 IE6，得换 JS 或结构上加 class
~ 和 +（相邻兄弟）的区别在哪
两者都要求同级、同父、顺序在后，但 + 只认紧挨着的下一个，~ 则“放开手”往后扫全部匹配项。
- 示例：
li + li只给除第一个外的每个li加左边框；而li ~ li效果一样，但语义更松散，可读性略低 - 性能影响极小，现代浏览器优化得很好，不用为这点差异改写法
- 容易踩坑：写成
div ~ .error却忘了前面的div可能根本没出现，结果整组.error都不生效——它依赖前驱元素真实存在
为什么有时候 ~ 看似没生效
大概率是 DOM 结构没对齐，或者 CSS 优先级被覆盖了，不是选择器本身的问题。
- 检查是否真为同级：打开开发者工具，确认目标元素和前驱元素是否在同一个父节点下，中间没夹杂其他标签或文本节点
- 注意空格和换行：HTML 中的换行会被解析为文本节点，可能让两个元素“看似同级实则隔了一个文本节点”，导致
~失效（这时用>或重构结构更稳） - 优先级陷阱：如果其他规则用了
id或更多类名，~规则可能被压住，加!important是信号，说明该重审选择器权重了
替代方案：什么时候不该硬用 ~
当结构不确定、需要跨层级、或要兼顾老浏览器时，~ 就不是最顺手的工具。
立即学习“前端免费学习笔记（深入）”；
- 结构动态生成（如 Vue/React 渲染）时，前驱元素可能条件渲染，导致
~规则完全失效——不如直接给目标元素加 class 或用属性选择器 - 想选“某个元素之后的所有同级，但排除其中某些类型”，
~无能为力，得靠 JS 或预处理器循环生成规则 - 真正复杂的选择逻辑，CSS 本就不是为它设计的；别试图用一堆
~、+、:伪类堆出业务逻辑，那是在透支样式表的可维护性
