波浪号~是通用兄弟选择器，只匹配同父、同级且位于前一元素之后的兄弟元素，不跨层级、不向上找，中间可隔任意兄弟节点。
波浪号 ~ 是通用兄弟选择器，只匹配同级、在它之后的元素
很多人以为 ~ 能“向上找”或“跨层级匹配”，其实它非常严格：必须和前一个选择器同属一个父元素、位于其后、且中间可以隔任意多个其他兄弟节点。比如 h2 ~ p 会选中所有在 h2 后面（不一定是紧邻）、且和 h2 同级的 p 元素。
常见错误现象：div ~ span 却没生效——可能因为 span 在 div 的子元素里，或者 span 出现在 div 前面；也有人误用 ~ 替代 +，结果发现样式批量应用了，而非仅下一个元素。
-
~不关心是否紧邻，+只认紧挨着的下一个 - 若需“后面所有同类兄弟”，用
~；若只要“紧接着的那个”，用+ - 兼容性没问题，IE7+ 都支持，但 IE6 不支持 —— 现在基本不用考虑
用 ~ 实现“点击切换 + 后续内容展开”这类交互效果
不需要 JS 就能靠 :checked + ~ 控制后续兄弟元素显隐，典型如隐藏式 FAQ 或折叠菜单。前提是把 <input type="checkbox"> 放在目标内容前面、同一层级。
使用场景：文档页内小范围折叠/展开、表单分组提示、纯 CSS 折叠面板（无 JS 依赖）。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构必须是：
<input id="toggle"><div></div> <p></p>，不能嵌套在别的标签里 - 选择器写成
#toggle:checked ~ .content，其中.content必须是#toggle的后续兄弟，不能是后代 - 如果中间插了个
<hr>或空<div>，不影响匹配 —— 这正是 <code>~和+的关键区别~和+、>、空格的优先级与组合陷阱当混用时，容易因权重或作用域理解偏差导致样式不生效。比如
section > h2 ~ p表示：先找section的直接子元素h2，再找这个h2后面所有同级p；而section h2 ~ p（空格）则会从任意后代h2开始向后找兄弟p，但这些p还得和那个h2同级 —— 很容易误以为能跨层影响。-
>（子选择器）限定层级，~限定同级顺序，二者叠加时逻辑更硬性 - 写
label ~ input没用，因为label和input通常不在同一层（input常在label内部） - 调试时可用浏览器开发者工具的“:hover”模拟 + 手动移动元素位置，验证
~是否真在起作用
为什么有时
~看似“失效”，其实是 HTML 结构没对齐最常被忽略的一点：CSS 选择器不会“穿透”层级。哪怕视觉上两个元素看起来并排，只要 DOM 树里不是同父、同级、后者在前者之后，
~就不会命中。例如，你写了
.trigger ~ .target，但实际结构是：<div class="trigger"></div> <div> <div class="target"></div> </div>
这时
.target是<div> 的子元素，不是 <code>.trigger的兄弟，所以完全不匹配。- 检查 DOM 层级比看渲染效果更可靠，右键“检查元素”，盯住父节点是否一致
- 如果必须跨层控制，
~无解，得换思路：加 class、用 JS、或重构 HTML - 别指望
~能替代 JS 的事件委托或动态类切换 —— 它只是静态关系描述符
-
