相邻兄弟选择器（+）匹配紧邻的同级元素，要求左右均为完整选择器且中间无其他元素节点；它不认视觉相邻而只看DOM结构，与通用兄弟选择器（~）的核心区别在于“下一个”与“后面所有”的语义精度。
相邻兄弟选择器的语法和基本行为
用 + 就是选“紧挨着的下一个同级元素”，不是所有后面的兄弟，只认紧邻那个。它左边必须是一个完整的选择器，右边也必须是一个完整的选择器，中间不能有空格以外的字符（比如不能写 .a+ .b，空格会变成后代选择器）。
常见错误现象：div + p 没生效，其实是因为 p 前面不是 div，而是 div 后跟了注释、文本节点或换行符——但注意：HTML 中的空白符（包括换行）在解析时会被忽略，真正影响的是 DOM 结构：只有当两个元素在 DOM 树中确实是同级、且中间没有其他元素节点时，+ 才匹配。
-
h2 + p→ 仅选中紧跟在h2后面的p，不选h2后第二个p - 若
h2后是div，再后才是p，那这个p不会被h2 + p选中 - 支持链式写法，如
li + li + li表示“第三个及之后每个li”，但实际更推荐用li ~ li或:nth-of-type(n+3)
为什么有时候 + 看似不工作
根本原因常出在 HTML 结构或 CSS 优先级上，而不是选择器写错了。浏览器对 + 的实现非常稳定，兼容性从 IE7 就开始支持（IE6 不支持），所以几乎不用考虑兼容问题。
典型场景：用 Vue/React 动态插入内容后样式失效。这是因为框架可能在目标元素前插入了注释节点（如 <!--v-if-->）或空 span，导致原本“相邻”的关系被破坏——DOM 节点层级变了，+ 就断了。
立即学习“前端免费学习笔记（深入）”；
- 检查开发者工具 Elements 面板，确认两个元素是否真为同级且无中间元素节点
- 避免依赖“视觉相邻”：CSS 不看渲染位置，只看 DOM 树结构
- 如果需要选中“后面所有同类兄弟”，改用通用兄弟选择器
~，比如h2 ~ p - 注意权重：一个
class加+（如.title + .content）比单纯div + p权重高，别被覆盖
+ 和 ~ 的关键区别与取舍
二者都要求同级，但 + 是“下一个”，~ 是“后面所有”。这不是功能强弱问题，而是语义精度问题——选错会导致样式意外应用或漏掉。
性能上没差别，现代浏览器对两者优化都很成熟；但可维护性上，+ 更易推理，因为关系唯一确定；~ 容易因后续加 DOM 节点而扩大影响范围，调试时更难追踪。
- 做表单提示：用
input.error + .hint，确保只提示紧接其后的提示文字 - 做文章段落缩进：用
p + p给第二段起加首行缩进，比p ~ p更安全 - 不要用
+.btn单独写——+左边不能为空，必须有左操作数 - 不能跨父容器：
section > h2 + p有效，但section + aside > p不会从section跳到aside里找p
真实项目中容易被忽略的细节
+ 对伪元素、匿名文本节点完全免疫——它只作用于元素节点。这意味着即使 HTML 写成 <div>Text</div><p>Hello</p>，div + p 依然匹配，因为文本 “Text” 是 div 的子节点，不影响 div 和 p 的同级关系。
但如果你用 JS 把 p 插入到 div 内部，或者用 display: contents 让某个父元素不产生盒子，DOM 层级就变了，+ 关系立即失效。
- SSR 页面中服务端渲染出的结构，和客户端 hydration 后的结构要一致，否则
+可能首次渲染有效、交互后失效 - 使用
contenteditable或富文本编辑器时，用户输入可能插入不可见的br或零宽空格，间接打断相邻关系 - 不要指望
+触发动画重排：它只是选择器，不监听 DOM 变化，状态变更需配合类名或属性切换
