:user-invalid 与 :invalid 的核心区别在于是否要求用户交互：:invalid 页面加载即匹配空值，而 :user-invalid 必须用户聚焦并失焦且值非法才触发；Chrome 102+、Firefox 119+、Safari 16.4+ 支持，旧版 Safari、IE、X5 内核等不支持；:invalid 适用于提交后统一高亮错误，:user-invalid 可规避输入抖动；混合使用时应将 :user-invalid 置于 @supports 内并保留 :invalid 兜底，且需用 setCustomValidity("") 清除自定义错误。
:user-invalid 和 :invalid 的触发时机差异
根本区别在于「用户是否真的编辑过」。:invalid 只要字段带 required、type="email" 等约束，页面一加载空值就匹配——哪怕用户还没点进去；而 :user-invalid 必须满足两个条件：用户曾聚焦该字段 + 失去焦点（blur）时值不合法。它不响应初始空状态，也不响应输入中途的中间态（比如 type="number" 里只打了 "1" 还没输完）。
哪些浏览器支持 :user-invalid？
截至 2026 年 8 月：:user-invalid 在 Chrome 102+、Firefox 119+、Safari 16.4+ 中可用；Edge 基于 Chromium，同步支持。但旧版 Safari（16.3 及更早）、IE、部分安卓 WebView 仍不支持。
- 用
@supports selector(:user-invalid)可做简单特性检测 - 不支持时，
:user-invalid规则会被整条忽略，不会报错 - 别指望它在微信内置浏览器（X5 内核）或低版本 UC 中生效
什么时候必须用 :invalid？
当你要覆盖「提交后所有错误字段统一高亮」，且不想写 JS 时，:invalid 仍是唯一纯 CSS 方案——因为表单提交会强制触发所有字段校验，此时 :invalid 能稳定命中所有失败项。
-
form:submit事件中调用event.preventDefault()不会影响:invalid的状态更新 - 但若你用
form.noValidate = true或加了novalidate属性，:invalid就完全失效 -
type="number"输入字母时瞬间变:invalid，但很快清空 value 导致样式闪退，这种“抖动”行为:user-invalid会自动规避
混合使用的推荐写法
兼顾现代与兼容，CSS 里可这样组织：
input:invalid:not(:placeholder-shown) {
border-color: #e53e3e;
}
@supports selector(:user-invalid) {
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
}
关键点是：:user-invalid 规则放在 @supports 块内，避免不支持时解析出错；同时保留基础 :invalid 规则兜底。注意 :placeholder-shown 要求输入框有 placeholder 属性，否则该选择器不匹配。
真正容易被忽略的是：即使用了 :user-invalid，JS 里仍要调 setCustomValidity("") 清空自定义错误，否则字段会永远卡在 :user-invalid 状态——这个细节不处理，样式就停在红框不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
