直接用:invalid会一打开就红边框，因为浏览器对:invalid的判定是静态且即时的：只要元素带required、type="email"等约束，空值就立刻匹配:invalid；而:user-invalid只在用户修改过且值不满足约束时生效，Chrome 102+、Firefox 119+、Safari 16.4+支持，但Safari存在渲染延迟问题。
为什么直接用 :invalid 会一打开就红边框
因为浏览器对 :invalid 的判定是静态且即时的：只要元素带 required、type="email" 等约束，空值就立刻匹配 :invalid。用户还没点进去，输入框已经红了——这不是 bug，是规范行为。
:user-invalid 的触发条件和浏览器支持现状
:user-invalid 只在用户**修改过该字段且当前值不满足约束**时才生效，跳过了“未操作即报错”的尴尬。但它不是全平台可用：
- Chrome 102+、Firefox 119+ 已稳定支持
- Safari 16.4+ 起支持，但截至 2026 年 7 月仍有少量渲染延迟问题（尤其配合
pattern时） - Edge 同 Chrome，无需额外处理
不建议单独依赖它做降级方案，但可作为现代浏览器的首选层。
如何写兼容又干净的 :user-invalid 规则
关键在于分层：用 :not(:user-invalid) 控制初始态，再叠加交互后反馈。不要只写 input:user-invalid —— 它无法覆盖未编辑前的 :invalid。
立即学习“前端免费学习笔记（深入）”；
- 初始无效但未操作 → 保持默认边框：
input:not(:user-invalid):invalid { border-color: #cbd5e0; } - 用户改过且错 → 明确标红：
input:user-invalid:invalid { border-color: #e53e3e; } - 用户改过且对 → 绿色确认：
input:user-invalid:valid { border-color: #38a169; } - 避免和
:focus冲突：验证用border-color，焦点用box-shadow，两者互不覆盖
遇到 :user-invalid 不生效时先查什么
它比 :invalid 更挑剔，失效往往不是语法错，而是约束没到位或状态没刷新：
- 检查是否漏了校验属性：
:user-invalid不会凭空触发，仍需required、type="email"或pattern -
type="number"对中间态敏感（如输到"12."就变:invalid），导致:user-invalid提前激活；建议这类字段改用type="text"+ JS 校验 - 点击
<button type="reset">后状态不会自动重置，需手动调用field.setCustomValidity('') - Safari 中若父容器用了
transform或will-change，偶尔会阻断伪类重绘，临时移除可验证
真正容易被忽略的是：哪怕用了 :user-invalid，异步校验（比如邮箱唯一性）依然得靠 JS 驱动，CSS 伪类对此完全无感。
