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