h2 + p 不生效主因是dom结构不满足“紧邻”条件：两元素须同父、顺序紧挨、中间无任何节点（含空白文本、注释等）；常见干扰包括编辑器换行产生的#text节点、框架注入注释、ssr模板空白字符或js动态插入时机问题。
为什么 h2 + p 有时完全不生效
不是选择器写错了，大概率是 DOM 结构没满足「紧邻」这个硬条件。+ 要求两个元素必须：同父、顺序紧挨、中间不能有任何节点——包括换行缩进产生的空白文本节点、HTML 注释、<script></script> 或其他标签。
常见错误现象：h2 + p 在编辑器里看着是紧挨的，但浏览器 Elements 面板里能看到 #text 节点卡在中间；或者 Vue/React 编译后自动注入了注释节点，导致 + 断开。
- 用开发者工具右键目标元素 → “Edit as HTML”，手动删掉疑似干扰节点（如注释、空行），看样式是否立刻恢复
- 服务端渲染或 SSR 场景下，检查模板是否生成了不可见的空白字符
- 动态插入元素时，别依赖 CSS 自动匹配：先插入节点，再通过
el.classList.add()显式控制样式
div + span 失效的三个典型结构原因
这个选择器只会在 div 和 span 是同一父容器下的连续兄弟节点时起作用。失效通常因为：
-
span实际嵌套在div内部（变成后代关系），此时该用div span或div > span -
span出现在div之前，+ 不支持反向查找 - DOM 尚未就绪，CSS 已完成解析计算——JS 动态插入后需触发重绘，例如临时加个 class 再移除，或改用 JS 直接操作
element.nextElementSibling
什么时候该用 ~ 而不是 +
~ 是通用兄弟选择器，它不关心中间隔了什么，只要目标元素在源元素之后、同级、同父，就会被选中。适用场景明确：
- 需要统一控制某类提示文案（比如所有
.field后面的.error），而它们之间可能穿插<label></label>或<div class="hint"> <li>表单校验状态批量响应：<code>.input.valid ~ .success-icon比写多个+更简洁 - 但注意：
h2 ~ p会污染所有后续p，调试时很难定位哪个样式覆盖了哪个段落 - Chrome 105+ / Safari 15.4+ / Firefox 121+ 支持：
button:has(+ .warning)表示“后面紧跟 .warning 的 button” -
:has()不能用在@keyframes或伪元素里，也不能嵌套:has() - 旧浏览器必须降级：用 JS 判断
el.previousElementSibling或el.nextElementSibling的类型和 class，再手动加 class 控制样式
想选“前一个兄弟”或“第 n 个兄弟”怎么办
CSS 原生不支持向前选（prev + current 这种逻辑），也不支持索引（如“第三个兄弟”）。现代 :has() 可部分绕过限制，但有兼容性门槛：
真正难处理的不是语法，而是当 DOM 结构本身不稳定时，强依赖兄弟顺序的 CSS 很容易在一次组件重构或 CMS 内容更新后突然失效——这时候加 class 比死磕 + 更省时间。
