:valid 和 :invalid 伪类仅在含 html5 校验属性的输入框被用户交互（如 blur 或提交）后触发，初始空值通常既非 :valid 也非 :invalid；推荐用 :user-invalid 或 js 添加临时类实现更及时反馈，并配合 :placeholder-shown 等伪类精准控制样式。
:valid 和 :invalid 是浏览器原生支持的表单校验伪类，但它们**只在输入控件具有 HTML5 校验属性（如 required、type="email"、min/max 等）且用户已与该字段交互过时才生效**。单纯写 :invalid { color: red; } 不会立刻变红——初始状态大多为 :valid（空值对多数类型是合法的），这点常被忽略。
为什么刚打开页面时 :invalid 样式不触发？
浏览器默认将空 <input required> 视为“未验证”（:blank 状态），此时既不是 :valid 也不是 :invalid。只有当用户聚焦后离开（blur），或提交表单时，才会触发校验并应用对应伪类。
- 解决办法：用
:user-invalid（Chrome 120+、Firefox 126+ 支持）替代，它在用户编辑后即生效，更符合直觉 - 兼容方案：配合
:focus-within或 JS 监听input事件，主动添加临时 class（如js-dirty），再用.js-dirty:invalid控制样式 - 注意：
type="number"在输入非数字时会自动清空 value，导致:invalid短暂出现又消失，调试时容易误判
:valid/:invalid 能响应哪些校验规则？
仅响应 HTML5 原生约束，不包含自定义 JS 校验结果。例如：
-
<input type="email" value="abc">→:invalid（格式错误） -
<input type="email" value="a@b.c">→:valid -
<input required value="">→ 初始为 neither，blur后变为:invalid -
<input pattern="[0-9]{3}" value="12">→:invalid（长度不足） - JS 调用
setCustomValidity("error")后，该元素会进入:invalid状态
如何避免样式冲突和视觉干扰？
直接对 :invalid 加 border: 2px solid red 容易覆盖开发者原本的边框设计，且无法区分“未填”和“填错”两种错误。
- 推荐组合：
input:invalid:not(:placeholder-shown)—— 排除 placeholder 显示时的空状态，只对已输入但无效的内容高亮 - 慎用
input:invalid:focus：聚焦时若同时显示错误提示，可能遮挡光标，建议改用input:focus:invalid并降低边框粗细 - 动画要克制：避免
transition: all，只过渡border-color或box-shadow，否则:valid切换时可能闪烁 - 无障碍注意：纯颜色变化不足以传达错误，必须搭配图标或 aria-live 区域
真正难的是让校验反馈节奏匹配用户操作——比如防抖后的实时校验、提交时批量标记、以及清除错误后如何重置状态。这些没法靠伪类单独完成，得和 JS 协同。伪类只是最后一层视觉表达，别把它当校验逻辑本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
