相邻兄弟选择器“+”本身不触发提示显示，仅控制已存在且紧邻的错误元素显隐；必须搭配:invalid等伪类，依赖表单控件原生校验状态变化驱动样式切换，HTML结构须严格满足同级相邻要求。
相邻兄弟选择器 + 本身不“有效”，它只是被动响应结构
它对动态表单验证“看起来有效”，是因为你把 :invalid、:focus 这类状态伪类和 + 拼在一起用了——真正驱动变化的是伪类，不是 +。浏览器不会因为用户输错就自动插入 .error 元素，+ 只能控制那个已经写死在 HTML 里、且紧挨着 input 的元素的显隐。
input:invalid + .error 为什么常失效？
常见错误现象：输入邮箱格式错误，但提示不出现；或者只在提交/失焦后才闪一下。
-
:invalid触发时机依赖原生校验逻辑：默认只在submit或blur后更新，不是实时的 - 如果表单加了
novalidate属性，:invalid会彻底失效，必须靠 JS 手动加 class - Safari 对
:invalid的初始判断更保守，空值 + 聚焦时通常不触发，要等失焦 - HTML 中
input和.error之间哪怕多一个换行或注释，+就断开匹配
怎么让 + 真正稳定工作？
关键不是“让它更智能”，而是接受它的刚性，并围绕它组织结构和行为：
- HTML 必须写成：
，不能有空格或注释 - 别用
display: none隐藏提示，改用opacity: 0; height: 0; overflow: hidden;，否则 CSS 根本找不到该元素 - 想“输入即反馈”？纯 CSS 做不到，得用 JS 监听
input事件并切换.is-invalid类，再配input.is-invalid + .error - React/Vue 中容易因组件封装导致结构嵌套，
input和.error不再同级——这时只能用 JS 控制 class，或改用:has()（但 Safari 15.4+ 才支持）
替代方案：什么时候该放弃 +？
当需求超出结构刚性边界时，比如：
- 错误提示要插在 input 上方，而不是后面
- 多个字段共用一个全局错误摘要，需要反向高亮对应 label
- 要根据深层嵌套的
.field-validation-error改变父容器样式
这时候 :has() 是更自然的选择，例如 .form-group:has(.error)，但得确认目标环境支持（Chrome 105+ / Edge 105+ / Safari 15.4+ / Firefox 121+）。否则，老老实实 JS 控制 class 更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
