:user-invalid比:invalid更适合错误提示，因为它仅在用户真实交互且校验失败后触发，避免初始加载时空输入框误标红；需配合required、type等原生校验属性使用，css推荐input:is(:user-invalid,:invalid:not(:placeholder-shown))并兼顾降级与js同步。
为什么:user-invalid比:invalid更适合错误提示
因为:user-invalid只在用户**真实交互过且校验失败**后才触发，避免页面一加载就给空的required输入框标红——这是:invalid最常被吐槽的体验问题。Chrome 102+、Firefox 119+、Safari 16.4+ 都已稳定支持，覆盖当前主流环境。
必须配合原生校验属性才能生效
:user-invalid不是万能开关，它依赖浏览器原生验证机制。没加约束，它永远不匹配。
- 至少要带一个校验属性：
required、type="email"、min/max、或pattern -
type="text"+required：用户输完再删光 → 触发:user-invalid；纯空值未操作过 → 不触发 -
type="email"+required：输入abc失焦 → 触发；输入a@b.c→ 不触发 - 用
setCustomValidity()设错后，必须调用reportValidity()或触发表单submit，否则:user-invalid不更新
如何写CSS才不被覆盖或失效
直接写input:user-invalid容易被其他规则压住，尤其当项目用了.form-control类或全局focus样式时。
- 优先用
input:user-invalid:not(:placeholder-shown)，排除 placeholder 还在时的干扰 - 别只改
border-color，统一用border: 2px solid #d32f2f，防止border-style或width缺失导致边框“看不见” - 如果用了
outline，记得在input:user-invalid:focus里加outline: none，否则红边+蓝 outline 叠在一起 - 深色背景上，同时设
background-color: #fff8f8和color: #d32f2f，别指望继承
兼容性 fallback 怎么写才稳妥
IE 完全不支持:user-invalid，旧版 Edge 行为不稳定，不能只靠它。
- 降级方案优先用
:invalid:not(:placeholder-shown)，它比单纯:invalid更接近:user-invalid语义 - 更保守的做法是 JS 控制：
blur时调用checkValidity()，手动加is-invalid类，CSS 写input.is-invalid - 组合写法（推荐）：
input:is(:user-invalid, :invalid:not(:placeholder-shown))，现代浏览器走:user-invalid，老浏览器退到:invalid逻辑 - 注意：Safari 对:user-invalid的触发略保守，比如要等到
blur或submit才响应，别指望input事件立刻更新
reset()后状态残留。这些没法全靠 CSS 解决，得靠 JS 主动同步checkValidity()和 class 切换——:user-invalid 是好工具，但不是全自动校验器。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
