相邻兄弟选择器语法为A + B，仅匹配同父级且紧邻A之后的B元素，中间不可插入任何节点；失效主因是DOM结构不符或CSS覆盖，替代方案有~选择器或JS控制。
相邻兄弟选择器的语法和生效条件
+ 只匹配紧邻的下一个兄弟元素，不是“后面任意一个”，也不是“所有后面的”。它要求两个元素必须有相同父级、且顺序严格为 A + B，中间不能插任何其他元素（包括文本节点、注释、空格换行在某些解析场景下也可能破坏匹配）。
- 父元素必须相同，
div + span不会匹配div后面隔了一个p的span - 元素必须是 HTML 中真实存在的兄弟节点，动态插入的节点需确保插入位置正确才能触发样式
- 伪元素（如
::before）不参与兄弟关系计算，不能被+选中
常见失效场景：DOM结构与CSS书写顺序
样式不生效，八成是因为 DOM 结构没对上，或者 CSS 规则被覆盖。比如：
- 页面里写的是
<h2>标题</h2><p>正文</p>，但 CSS 写了h3 + p→ 匹配不到 - 使用了
display: none或visibility: hidden的前一个元素，+仍能匹配（因为 DOM 节点还在），但视觉上容易误判为“没起作用” - CSS 文件加载顺序导致规则被后写的更宽泛选择器覆盖，比如
p { color: red; }在h2 + p { color: blue; }后面 → 蓝色不会显示
建议用浏览器开发者工具的“Computed”面板确认是否命中规则，再看“Styles”里哪条被划掉。
替代方案：当 + 不够用时该选什么
需要选“后面所有同级兄弟”？用 ~（通用兄弟选择器）。
需要基于状态联动（比如点击后影响下一个）？纯 CSS 需依赖 :checked + + 配合隐藏单选/复选框，或改用 JS 监听事件后加类。
要兼容 IE8？+ 是支持的，但 IE8 不支持 ~ 和属性选择器等现代特性，别混用。
-
h2 + p：只影响紧跟在h2后面的第一个p -
h2 ~ p：影响h2后面所有同级p -
input[type="checkbox"]:checked + label：勾选后仅高亮紧邻的label，安全可靠
性能与维护隐患：别在复杂组件里滥用 +
+ 本身没有性能问题，但容易写出脆弱的 CSS：一旦模板里多加一个 div 包裹，或调整渲染顺序，样式就断了。尤其在 React/Vue 组件中，JSX 或模板逻辑可能悄悄插入占位节点（比如 {condition && <span>…</span>}），让原本紧邻的两个元素不再相邻。
立即学习“前端免费学习笔记（深入）”；
- 避免用
+.content这类无上下文的选择器，没人知道前面那个“隐式元素”是什么 - 如果交互逻辑强依赖相邻关系，优先考虑加明确的 class（如
section--has-subtitle）或用 JS 控制类名 - 审查 PR 时留意新增的 wrapper 元素，它们是最常破坏
+的元凶
相邻兄弟选择器不是银弹，它的力量全来自“紧邻”这个精确约束，也正因如此，它特别容易被 DOM 微小变动废掉。
