:valid 和 :invalid 仅对含验证属性（如required、type="email"、min/max等）的原生表单控件生效；空但非必填视为:valid，必填为空则立即:invalid；应结合:not(:placeholder-shown)或:user-invalid延迟样式触发，避免过早提示。
什么时候 :valid 和 :invalid 才会生效
这两个伪类只对具有内置验证能力的表单控件起作用，比如 <input type="email">、<input required>、<input min="0" max="100">、<select required>，以及 <textarea required>。普通 <input type="text"> 没加 required 或其他验证属性时，浏览器默认认为它始终 :valid，哪怕内容为空。
常见错误是写了样式却没反应——先检查元素有没有实际触发验证的属性，再确认是否用了原生 HTML5 验证机制（而不是 JS 手动 setCustomValidity）。
-
:invalid在元素值不满足约束（如邮箱格式错误、必填但为空、数字超范围）时匹配 -
:valid在值满足所有约束时匹配，包括“空但非必填”这种合法状态 - 即使用户还没输入，
required字段初始为空，也会立即匹配:invalid
为什么刚聚焦就变红？如何避免过早提示
浏览器在元素获得焦点前就计算验证状态，所以 required 输入框一渲染就是 :invalid，导致用户还没操作就看到红色边框——体验很突兀。
解决思路不是禁用伪类，而是用 CSS 选择器延迟样式生效：
立即学习“前端免费学习笔记（深入）”；
- 加
:not(:placeholder-shown)：适用于有placeholder的输入框，用户开始输入后才激活样式 - 加
:user-invalid（Chrome 102+、Firefox 119+）：仅在用户与控件交互后（输入、失焦、提交）才触发:invalid，更符合直觉 - 回退方案：用 JS 监听
input或blur，动态加 class（如.touched），再写.touched:invalid
例如：
input:invalid:not(:placeholder-shown) { border-color: #e53e3e; }比单纯 input:invalid 更友好。
:valid 和 :invalid 的样式优先级陷阱
它们的权重和普通类名一样（a=0, b=0, c=1），容易被 .form-input.error 这类高权重要素覆盖。更麻烦的是：当 JS 调用 setCustomValidity('') 清空错误时，元素会立刻切到 :valid；但若同时存在 .error 类且带 !important，视觉状态就和真实验证状态脱节。
关键原则：验证样式应由伪类完全控制，避免混用 class 控制同一属性：
- 不要同时用
.error { border-color: red; }和:invalid { border-color: red; } - 如果必须用 JS 控制，统一走
setCustomValidity()，让伪类自动响应 - 需要过渡动画？用
transition: border-color 0.2s，但注意:valid/:invalid切换是即时的，无中间态
配合 checkValidity() 和 reportValidity() 的边界情况
CSS 伪类只反映当前 DOM 状态，但 JS 方法可能触发不同行为。比如调用 reportValidity() 会强制显示浏览器默认气泡提示，并让 :invalid 生效；而 checkValidity() 只返回布尔值，不触发 UI 变化。
容易忽略的点：
-
<form>元素本身也支持:valid/:invalid，只要任一子控件失效，整个表单就为:invalid - 自定义验证（
setCustomValidity('xxx')）后，需手动调用reportValidity()才能刷新伪类状态（部分旧版 Safari 需要） -
type="number"在输入非数字字符时，值为''，此时min/max不参与校验——得靠pattern或 JS 补充
真正难的不是写对伪类，而是协调 HTML 属性、CSS 响应时机、JS 主动验证三者的节奏。稍不注意，用户看到的样式就跟底层验证结果对不上。
