css相邻兄弟选择器“+”要求左侧元素后必须紧邻右侧元素，中间不能有任何节点；其生效依赖dom真实结构、伪类状态触发时机、css优先级及渲染流，不兼容旧浏览器时应改用:has()或js控制。
检查DOM中是否真有“紧邻的兄弟”关系
浏览器只认DOM树里的节点顺序，不看HTML源码缩进或视觉位置。+要求左侧元素后面**紧跟着**右侧元素，中间不能有任何其他节点——包括注释、空文本节点（换行/空格解析后生成的#text）、<span></span>占位符，甚至框架注入的<!--v-if-->。
打开开发者工具 Elements 面板，鼠标悬停在触发元素（比如input）上，逐个展开它的nextSibling，确认第一个非空节点是不是你要选的目标（比如.error）。如果不是，+必然失效。
- Vue 中用
v-if而非v-show会移除节点，破坏链路 - React JSX 返回多个并列元素时，会被自动包裹成
Fragment，可能改变父级层级 - Svelte 作用域样式类名哈希不一致（
.a.svelte-xyz + .b.svelte-abc）导致匹配失败
确认伪类状态是否真正被触发
+本身不监听输入或校验变化，它只是“条件开关”。真正驱动显示/隐藏的是伪类，比如:invalid、:focus、:checked。这些状态有明确的触发时机，不是实时的。
-
required字段只有在失焦（blur）或表单提交时才更新:invalid，首次输入错误不会立刻变 - 加了
novalidate属性后，原生:invalid完全失效，必须靠 JS 手动加 class -
input:focus + .hint在聚焦时就生效，但若用户还没输内容，提示可能过早出现——这时更适合用input:not(:placeholder-shown) + .hint
排查CSS优先级和结构干扰
即使DOM和伪类都对了，样式仍可能被覆盖或忽略。常见干扰点很隐蔽：
-
input + .error权重低于.form .error，后者会直接覆盖前者 - 目标元素设置了
display: none，它虽然还在DOM里，但已退出渲染流，~选择器会跳过它，+则根本找不到“下一个可见兄弟” - 用了
display: contents的父容器会让子元素脱离正常文档流，兄弟关系“升维”，导致原本同级的元素实际不再同父 - Shadow DOM 内部的选择器无法穿透到外部，外部 CSS 也选不到 Shadow 内部节点
替代方案：什么时候该放弃+？
当结构无法保证紧邻、或需要反向控制（比如根据后面是否有提示来设置前面 input 的边框颜色），+ 就不是解法。现代浏览器已普遍支持 :has()：
.input:has(+ .error) {
border-color: #e53e3e;
}
这条规则只在 .error 真实存在且紧邻时才生效。但它不兼容 IE 和旧版 Safari/Firefox——如果项目还需支持这些环境，就得用 JS 控制 class，把状态判断逻辑交出去，样式层保持纯粹。
最常被忽略的一点是：你写的 + 很可能语法完全正确，只是它面对的 DOM 已经不是你写代码时想象的那个结构了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
