:user-invalid比:invalid更温和，因它仅在用户编辑后校验失败时触发，而:invalid在页面加载即标记空required为无效；触发需满足：含校验属性、用户交互、调用reportValidity()或提交；Safari需blur或submit才响应。
为什么:user-invalid比:invalid更温和
因为 :user-invalid 不会在页面加载时就给空的 required 输入框标红——它只在用户**真实编辑过且校验失败**后才触发。而 :invalid 一渲染就判定空 required 为无效，导致“还没输就报错”，体验生硬。
必须满足哪些条件才能触发:user-invalid
它不是开关，而是依赖浏览器原生校验机制的伪类，缺一不可：
-
input必须带至少一个校验属性：required、type="email"、min/max、或pattern - 用户必须发生过交互：输入内容、粘贴、删除、失焦（
blur）或提交（submit） - 调用
setCustomValidity("msg")后，必须触发reportValidity()或表单提交，状态才会更新 - Safari 对触发时机较保守：通常要等到
blur或submit才响应，不会在input事件中立刻更新
怎么写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 怎么写才稳妥
:user-invalid 在 IE 完全不支持，旧版 Edge 行为不稳定，不能只靠它：
立即学习“前端免费学习笔记（深入）”；
- 降级首选
: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 就不会更新。 
