:user-invalid比:invalid更温和，因它只在用户编辑过且值不合法时生效，避免页面加载即标红空required字段；需带原生校验属性（如required、type="email"），Chrome 102+、Firefox 119+、Safari 16.4+支持，旧版Safari需降级用.touched:invalid。
为什么:user-invalid比:invalid更温和
:user-invalid只在用户真正编辑过字段、且当前值不满足约束时才匹配，不会在页面加载后立刻把空的required输入框标红。这是它“温和”的核心——不假设用户已出错，只响应真实交互后的校验失败。而:invalid一打开页面就生效，是规范行为，不是 bug，但体验生硬。
必须满足的 HTML 前提条件
没有这些，:user-invalid完全不触发：
- 输入控件必须带至少一个原生校验属性：
required、type="email"、minlength="6"、pattern="[0-9]{4}"等 - 不能只靠 JS 的
setCustomValidity()；若用了它，需配合reportValidity()或表单提交才能更新状态 -
placeholder属性非必需，这点和:invalid:not(:placeholder-shown)不同
浏览器支持现状与降级策略
:user-invalid 在 Chrome 102+、Firefox 119+、Safari 16.4+ 中稳定可用，但旧版 Safari（如 iOS 15.x）仍不支持。不能当作唯一方案：
- 现代写法直接用：
input:user-invalid { border-color: #e53e3e; } - 兼容 fallback 推荐：
input.touched:invalid—— 用 JS 在blur或input后加touched类 - 避免混合写法如
input:user-invalid, input.touched:invalid，因为 Safari 会忽略整条规则（选择器任一部分失效即丢弃）
容易被忽略的样式细节
即使匹配成功，视觉反馈也可能失效：
立即学习“前端免费学习笔记（深入）”；
- 别只改
color：表单控件对颜色继承不敏感，优先设border-color、background-color或box-shadow -
outline不能删：移除焦点轮廓会损害键盘可访问性；用box-shadow: 0 0 0 2px #e53e3e;叠加，不干扰:focus - 过渡动画只能用可插值属性：
transition: border-color .2s, box-shadow .2s;——display或visibility无法和:user-invalid协同动画 - 父容器无法响应：
:user-invalid和:invalid一样，只作用于input/select/textarea本体，想高亮整个.form-group还得靠:has(input:user-invalid)（Chrome/Firefox 支持）或 JS
:user-invalid 的触发时机完全依赖浏览器对「用户是否编辑过」的判定——这个判定在 Safari 中曾因 focus/blur 事件冒泡顺序不同而偶发失效，目前虽已收敛，但在复杂表单中仍建议用 input + blur 双监听兜底。 
