DOM节点的“紧邻”关系指兄弟节点在DOM树中物理连续，CSS相邻兄弟选择器+仅匹配紧随其后的同级元素；动态渲染插入注释或空节点、HTML换行生成文本节点、作用域哈希类名不一致等，均会破坏该连续性导致+失效。
DOM结构被动态插入节点破坏了“紧邻”关系
动态加载内容（比如 Vue 的 {#if}、React 的条件渲染、Svelte 的 {#each}）常在目标元素之间插入注释节点或空元素，导致原本的 A + B 关系断裂。浏览器只认 DOM 树中的真实节点顺序，不认视觉位置——哪怕 HTML 里只多了一行换行，解析后也可能生成文本节点，div + p 就会失效。
- Vue 渲染时插入
<!--v-if-->注释节点 - React 用
<span></span>占位空内容 - Svelte 作用域哈希类名不一致（
.a.svelte-xyz + .b.svelte-abc不匹配） - 服务端渲染输出带缩进/换行的 HTML，生成空白文本节点
你写的 + 其实没写错，只是没命中目标元素
打开浏览器开发者工具的 Elements 面板，把鼠标悬停在触发元素（比如 input）上，看它后面第一个兄弟是不是你要选的元素（比如 .hint）。如果不是，说明中间有别的节点挡着——哪怕是个看不见的 #text 节点，+ 就断了。这不是 CSS bug，是它本来的设计逻辑。
-
input:focus + .hint失效？检查.hint是否真在input后面且同级 - 用了
display: none的前驱元素仍参与兄弟关系，但容易误判为“没生效” - CSS 加载顺序导致规则被覆盖：宽泛选择器（如
p { color: red; }）写在input + p后面，样式就被冲掉了
别硬扛，该换方案就换
纯 CSS 在动态场景下对 + 的可靠性很低。与其反复调结构，不如用更可控的方式：
- 改用
~（通用兄弟选择器）：它不要求“紧邻”，只要同级、在后面就行，input:focus ~ .hint更耐折腾 - 加 class 控制：JS 监听
mouseenter或focus，给父容器加is-active类，CSS 写.parent.is-active .preview - Svelte 用户用
:global(.a + .b)绕过作用域哈希，但得配唯一前缀防冲突
静态结构能调就调，但别信“看起来挨着”
如果确定是静态 HTML，最直接的解法是删掉两个元素之间的所有换行、空格、注释——或者用构建工具压缩 HTML。但要注意：flex-direction: row-reverse 这类视觉反转技巧只适用于 label/input 这种明确配对的场景，不能解决跨容器、嵌套深或批量渲染的问题。真正容易被忽略的，是“DOM 节点是否真实连续”这件事，它比选择器语法本身更关键。
