:user-invalid比:invalid更适合用户交互，因它仅在用户编辑后值不满足原生约束时触发，避免空字段初始即报错；需配合required等原生校验属性，chrome 102+/firefox 119+/safari 17.4+支持。
为什么:user-invalid比:invalid更适合用户交互场景
因为 :user-invalid 只在用户真正编辑过字段、且当前值不满足约束时才匹配；而 :invalid 从页面加载第一帧就开始判断——空的 required 字段瞬间就是 :invalid，红框突兀出现，不是 bug，是规范行为。用户还没碰键盘，就收到错误暗示，体验断层。:user-invalid 把“是否该反馈”这个逻辑交还给用户行为本身，CSS 第一次能直接表达“你动过它，但它错了”。
哪些浏览器支持:user-invalid，怎么查兼容性
:user-invalid 在 Chrome 102+、Firefox 119+、Safari 17.4+ 中稳定可用。Safari 16.4 开始部分支持，但存在偶发不触发问题，17.4 是可靠起点。可以用以下方式快速验证当前环境：
input:user-invalid { border-color: #e53e3e; } /* 加上后输几个字再删空，看是否变红 */
若无效，说明环境不支持，需降级到 JS 控制的 .touched:invalid 方案。
必须配合哪些 HTML 属性才能生效
:user-invalid 不是万能开关，它依赖浏览器原生校验机制，所以 HTML 必须带至少一项约束属性：
-
required（最常用） -
type="email"、type="url"、type="number"（注意：type="phone"会被降级为text，无效） -
pattern="[0-9]{6}"（别加斜杠，"/[0-9]{6}/"❌） -
minlength="2"、maxlength="10"、min="1"等数值约束
没有这些，:user-invalid 永远不会匹配——它不关心自定义 JS 校验，只响应原生约束结果。
怎么避免:focus和:user-invalid样式打架
直接写 input:focus:user-invalid { border-color: red; } 会覆盖 focus 的高亮效果，尤其在 Windows 高对比模式下 outline 可能消失。推荐分层控制：
- 用
border-color表达验证状态（合法绿 / 非法红） - 用
box-shadow表达聚焦状态（更稳，不受系统设置干扰） - 显式写出组合规则：
input:focus { box-shadow: 0 0 0 2px #3182ce; }+input:user-invalid { border-color: #e53e3e; } - 禁用
:user-invalid的过渡动画：input:user-invalid { transition: none; }，错误反馈需要明确即时
复杂点在于：自定义校验（如用户名是否已存在）不会触发 :user-invalid，除非你调用 setCustomValidity() 并确保每次异步校验后都同步更新——漏一次，状态就卡死，且无法靠 CSS 恢复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
