:user-invalid 伪类更可靠，它仅在用户交互后匹配验证失败状态，避免页面加载时误标红；需配合 input 原生验证属性（如 required、type="email"）且 form 无 novalidate 属性。
:invalid 伪类能实现红框，但直接写 input:invalid { border-color: red; } 大概率没反应——不是 CSS 写错了，是浏览器压根没触发这个状态。
为什么 :invalid 没生效？
它只响应原生 HTML5 验证逻辑，不是“内容为空就标红”。必须同时满足：
-
<input>带验证属性，比如required、type="email"、minlength="6"； -
<form></form>没有novalidate属性； - 用户已交互（失焦、输入后删空、或提交表单）——Safari 和部分 Chrome 版本在页面加载时不会立即应用
:invalid。
常见误操作：<input type="text"> 输了错邮箱却不变红，因为 type="text" 不校验格式；换成 type="email" 才行。
:user-invalid 比 :invalid 更靠谱
:user-invalid 是 Level 4 Selectors 标准，只在用户操作后（如失焦、提交、修改内容）才匹配失败状态，避免一进页面所有 required 输入框全变红。
兼容性已足够：Chrome 102+、Firefox 119+、Safari 16.4+（2026 年基本全覆盖）。
推荐写法：
input:user-invalid {
border: 2px solid #d32f2f;
outline: none;
}
注意：:user-invalid 不会替代 :invalid，它只是更精准的时机控制；两者可共存，但 :user-invalid 优先级更高。
边框红了但被其他样式盖住怎么办？
最常踩的坑是层叠顺序和声明不完整：
- 别只写
border-color: red—— 如果原始样式定义了border: 1px solid #ccc，只改颜色可能因border-style或border-width缺失导致视觉异常；改用完整声明border: 2px solid #d32f2f； -
:focus下的outline会叠加在红边框上，显得混乱，加outline: none显式清除； - 如果用了 CSS 框架（如 Ant Design），它的
.ant-input-status-error类可能覆盖你的:user-invalid，要么提高选择器权重，要么改用 JS 控制 class（比如监听blur后加is-invalid类）。
JS 主动触发验证时，:invalid 还管用吗？
用 setCustomValidity("xxx") 设错，再调 reportValidity()，:invalid 会正常匹配；但若后续调 setCustomValidity("") 清除错误，样式会立刻消失——这和手动切 class 的行为不一致，容易造成视觉与状态不同步。
更稳的做法是统一走 class 控制：
input.is-invalid {
border: 2px solid #d32f2f;
}
然后在 JS 中根据 element.validity.valid 动态增删 is-invalid，不依赖伪类时机。
真正麻烦的不是怎么写红框，而是什么时候让它出现——用户还没碰过字段就亮红，比没提示更伤体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
