相邻兄弟选择器+匹配表单错误提示必须满足三要素：.error元素紧邻input后且同级、input含required等触发:invalid的属性、.error初始不可见但CSS明确定义input:invalid + .error{display:block}等显式显示规则。
相邻兄弟选择器怎么匹配表单错误提示
必须用 :invalid 或自定义 .error 类配合 + 才能生效，纯 HTML 的 required 属性触发后，input:invalid + .error 是最简可行路径。浏览器原生验证不自动插入提示元素，得自己写 紧跟在 input 后面。
为什么 input:invalid + .error 有时不显示
常见原因有三个：
-
.error元素没紧跟在input后面（中间不能有其他标签，包括换行符在某些解析模式下也算） -
input没设required或type="email"等可触发:invalid的属性 -
.error默认是display: none，但没写input:invalid + .error { display: block; }这类显式规则
:invalid 和自定义 .error 类怎么选
原生 :invalid 响应快、无需 JS，但只在用户交互后才激活（比如失焦或提交），且无法表达语义化错误类型（如“密码太短”）。自定义类需 JS 控制，但更可控：
- JS 验证后加
input.classList.add('has-error') - CSS 写
input.has-error + .error { opacity: 1; } - 记得给
.error设初始opacity: 0和transition，避免闪现
移动端和 Safari 的兼容细节
:invalid 在 iOS Safari 15.4+ 才稳定支持，旧版需降级为 JS 方案。另外，input[type="number"] 在部分安卓浏览器中即使输入字母也不会触发 :invalid，得额外监听 input 事件做正则校验。相邻兄弟选择器本身无兼容问题，但组合使用时要注意：
- 不要用
input:focus + .error来控制提示显示——焦点状态和错误状态不是一回事 -
.error最好设font-size: 0.875em和color: #d32f2f，避免和 label 混淆 - 如果表单用了
flex布局，确保.error不被flex-wrap挤到下一行导致选择器失效
实际中最容易被忽略的是 DOM 顺序和初始隐藏逻辑——.error 元素必须存在、位置紧邻、且 CSS 里明确写了“无效时才可见”，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
