:user-invalid更适合错误提示，因其仅在用户真实交互且校验失败后触发，避免初始空输入框误标红；需配合required等原生校验属性，推荐用input:is(:user-invalid,:invalid:not(:placeholder-shown))兼顾兼容与体验。
:user-invalid 不是“支持度不高”，而是各浏览器落地节奏不一致
它不是被拒绝的标准，而是标准推进中自然存在的阶段性差异。Chrome 102+（2022年3月起）已稳定支持，Firefox 直到 119+（2023年10月）才正式启用，Safari 最晚——16.4+（2023年4月）开始实验性支持，但早期行为保守（比如只在 blur 或 submit 后响应，而非 input 实时更新）。这意味着：2026 年今天，主流桌面环境基本可用，但 iOS 16 及更早的 Safari（仍占一定存量）完全不识别该伪类，会静默忽略整条规则。
真正卡住落地的是 Safari 的实现策略和旧版兼容压力
Safari 对 :user-invalid 的触发条件比规范更严格，例如：
- 用户输入后立刻切走（未失焦），
:user-invalid可能不激活 -
reset()表单后，部分 Safari 版本残留旧状态，不重置伪类匹配 - 即使写了
input:user-invalid，若父容器有all: revert或重置了border-style，红边也“看不见”——这不是支持问题，是样式链断裂
开发者误用进一步放大了“不支持”的感知
很多实际失效案例根本不是浏览器不支持，而是没满足前置条件：
- 没加
required、type="email"等原生校验属性 →:user-invalid永远不匹配 - 写了
.form-control:user-invalid，但项目全局 CSS 里.form-control:focus的border-color权重更高，直接盖掉 - 依赖
setCustomValidity()却漏掉input.setCustomValidity("")重置 → 状态卡死，后续任何操作都不再触发 - 在
input上直接写:user-invalid，却没排除:placeholder-shown干扰 → placeholder 还在时就提前生效（或反之）
别等“全支持”，要建可控的渐进式方案
最稳妥的做法不是停在 :user-invalid，而是用组合选择器兜底：
input:is(:user-invalid, :invalid:not(:placeholder-shown))
现代浏览器走 :user-invalid，老浏览器自动退到 :invalid:not(:placeholder-shown)。但要注意：:placeholder-shown 在 Safari 15.6 以下也不支持，所以必须确保每个 input 都有 placeholder 属性（哪怕只是空格 placeholder=" "）。真正的难点不在语法，而在于 reset、粘贴、快速切换等边界操作下，CSS 无法主动同步状态——这时 JS 调用 checkValidity() + 手动切 class 仍是不可替代的一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
