相邻兄弟选择器“+”只匹配紧邻的下一个同父兄弟元素，中间不能有任何节点（包括空白、注释等）；通用兄弟选择器“~”则匹配之后所有符合条件的同父兄弟元素，不受中间节点影响。
相邻兄弟选择器 + 只匹配紧挨着的下一个兄弟元素
它要求两个元素必须有相同的父容器，且目标元素必须紧跟在指定元素之后，中间不能有任何其他兄弟节点（包括文本节点、注释、空格换行等在 HTML 中被解析为文本节点的情况）。
常见错误是以为只要“同级+后面”就行，结果因为 DOM 中存在空白文本节点导致不生效。比如：
<div>A</div> <!-- 注释 --> <div>B</div>
此时 div + div 不会选中 B，因为中间有注释节点——它也是兄弟节点。
-
A + B：只对 A 后面**第一个**符合条件的 B 生效 - 对动态插入的元素无效，除非新元素恰好插入在 A 正后方且无间隔
- 性能较好，浏览器只需检查紧邻节点
通用兄弟选择器 ~ 匹配所有后续兄弟元素
它不要求“紧邻”，只要目标元素在指定元素之后、同级、同父，就会被选中，不管中间隔了多少其他兄弟节点。
立即学习“前端免费学习笔记（深入）”；
典型使用场景是表单校验提示：让所有 .error-message 在 .input:focus 之后显示，不管它们在 HTML 中的位置是否靠近。
-
A ~ B：选中 A 后面**所有**符合条件的 B（即使中间有 5 个div或 3 条注释） - 对后续插入的兄弟元素依然有效（只要满足位置关系）
- 性能略低，需遍历后续全部兄弟节点
- 注意：不支持跨父容器，
.parent1 > .a ~ .b不会匹配.parent2 > .b
为什么 + 有时失效而 ~ 能用上？检查 DOM 结构是否“干净”
当 + 没生效，第一反应不该是换选择器，而是打开开发者工具的 Elements 面板，把鼠标悬停在对应标签上，看它前面是不是真只有目标前驱元素。
- HTML 换行和缩进常生成文本节点，
<div></div>\n<div></div>中的\n就是文本节点 - Vue / React 渲染时可能注入注释节点（如
<!--v-if-->），破坏+的连续性 - 服务端渲染（SSR）输出带空格的 HTML 更容易触发该问题
- 临时验证方法：给父容器设置
font-size: 0，再给子元素单独设font-size，可消除文本节点的空白占位（但只是调试技巧，非解决方案）
实际项目中怎么选？看控制粒度和稳定性需求
想精确控制样式仅作用于“下一步操作按钮”，就用 button.submit + button.next；想让所有后续警告框统一高亮，就用 .field.error ~ .hint。
- 需要强约束、防误触 → 优先
+，配合严格的 HTML 结构或构建时 HTML 压缩（移除空白） - 需要松耦合、容忍结构变化 → 用
~，尤其适合组件化开发中子组件顺序不固定的情况 - 避免混用：
label + input ~ .error是合法的，但语义复杂，维护成本高，不如加 class 或用 JS 控制显隐 - 兼容性无差异：两者都支持 IE7+，现代项目无需顾虑
真正难的是写完发现样式没生效，然后花十分钟才发现是换行多了一个文本节点——这种细节在审查 DOM 前几乎无法靠猜解决。
