相邻兄弟选择器+只匹配紧邻的下一个同级元素，普通兄弟选择器~匹配同一父元素下h2之后所有p元素；二者均要求同级同父、不跨层级，对DOM结构敏感，结构变动易失效。
相邻兄弟选择器 + 只匹配紧挨着的下一个同级元素
当你写 h2 + p，它只会选中紧跟在 h2 后面、且是同一父容器下的第一个 p 元素。中间插了其他标签（哪怕只是空格或注释节点），或者不是直接后继，就完全不生效。
常见错误现象：h2 + p 在 HTML 里写了 <h2>标题</h2>
<div>说明</div>
<p>段落</p> 却没生效——因为 p 不是 h2 的**紧邻**兄弟，中间隔了 div。
- 必须是同一父元素下的连续兄弟关系
- 只向右匹配，不回溯，也不跨层级
- 对空白文本节点敏感（换行缩进可能生成文本节点，影响匹配）
- 性能好，浏览器可快速定位，适合高频样式控制
普通兄弟选择器 ~ 匹配后面所有符合条件的同级元素
h2 ~ p 会选中同一个父容器下、出现在任意一个 h2 **之后的所有 p 元素**，不管中间隔了多少其他标签。
使用场景：比如想让所有位于标题之后的段落都缩进，但又不确定它们之间会不会插入图片、引用块或广告位——这时 ~ 比 + 更鲁棒。
立即学习“前端免费学习笔记（深入）”；
- 不关心中间有没有“拦路”的兄弟节点
- 仍要求同级、同父，不能跨
div或section边界 - 若页面中多个
h2，每个都会触发后续所有p的匹配（可能重复命中） - 兼容性与
+一致（IE7+），但部分旧版 Safari 对复杂嵌套下的~解析有偏差
结构松动时，+ 和 ~ 都会失效
这两个选择器都依赖严格的 DOM 层级关系。一旦目标元素被包裹进新容器，比如把 p 套进 <article></article> 或 <div class="content">，那它就不再是 <code>h2 的兄弟，而是侄子——h2 + p 和 h2 ~ p 都不会匹配到它。
这时候得换思路：要么改用后代选择器（如 h2 ~ .content p），要么调整 HTML 结构，要么加类名控制。
- 检查开发者工具里的实际 DOM 树，别只看视觉排版
- 注意框架（如 React/Vue）动态插入内容时可能打乱原始兄弟关系
- 服务端渲染或 SSR 页面中，注释/空格/条件渲染残留节点也会影响
+的行为
要不要用兄弟选择器？先问这三个问题
兄弟选择器看着简洁，但耦合的是 HTML 结构。一旦结构微调，样式就断。
- 这个样式是否真的依赖「位置关系」，而不是语义角色？（比如“标题后的第一段” vs “导语段落”）
- 未来内容编辑者会不会无意中插入新元素，导致样式意外消失？
- 有没有更稳定的替代方案？比如给目标元素加
class="lead"或用:nth-of-type(1)配合语义化标签
真正难的不是写对 + 或 ~，而是判断什么时候不该用它们。
