:user-invalid 能避免页面加载时全红，但需同时满足校验属性、用户交互、浏览器支持三者；它仅在用户操作后值不合法时触发，比 :invalid 更符合用户预期。
直接用 :user-invalid 就能避开“一打开就全红”的问题，但它不是万能开关——必须满足校验属性、用户交互、浏览器支持三者齐备，否则照样不生效。
为什么 :user-invalid 比 :invalid 更友好？
因为 :user-invalid 不会在页面加载时就把空的 required 输入框标红。它只在用户真实编辑过（哪怕只输一个字符又删掉）、且当前值不满足约束时才触发。而 :invalid 一渲染就判定空 required 为无效，导致“还没动就报错”，体验生硬。
常见错误现象：input:required 页面加载完立刻变红；用户点进去还没输，边框已红；表单初始状态全是错误提示。
-
:user-invalid是 Level 4 Selectors 标准，语义上更贴近“用户操作后暴露的问题” - 它不响应初始空值，也不响应未交互的
type="email"字段 - 但 Safari 对触发时机较保守：通常要等到
blur或submit才更新，不会在input事件中实时响应
哪些条件缺一不可？
:user-invalid 不是 CSS 开关，而是依赖浏览器原生校验机制的状态反馈，必须同时满足：
-
input必须带至少一个校验属性：required、type="email"、min/max、pattern - 用户必须发生过交互：输入、粘贴、删除、
blur或提交表单 - 若调用过
setCustomValidity("msg")，必须再触发reportValidity()或表单提交，状态才会同步更新 -
form不能有novalidate属性，否则整个校验链被禁用
漏掉任意一条，:user-invalid 都不会匹配。比如只加 required 但没触发任何交互，样式就完全不出现。
怎么写 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，别指望继承
特别注意 Safari 行为差异：即使你调用了 setCustomValidity("邮箱已被注册")，但没紧接着调用 reportValidity()，:user-invalid 就不会更新——这点极易被忽略。
兼容性 fallback 怎么写才稳妥？
:user-invalid 在 IE 完全不支持，旧版 Edge 行为不稳定，不能只靠它。
- 降级首选：
input:invalid:not(:placeholder-shown)，语义最接近:user-invalid - 更保守的做法是 JS 控制：在
blur时调用checkValidity()，手动加is-invalid类，CSS 写input.is-invalid - 推荐组合写法：
input:is(:user-invalid, :invalid:not(:placeholder-shown))，现代浏览器走:user-invalid，老浏览器退到:invalid逻辑
真正难的是自定义校验同步——比如异步检查邮箱唯一性后调用 setCustomValidity()，但忘了 reportValidity()，:user-invalid 就永远卡在旧状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
