因为required等约束属性使空值默认触发:invalid，这是HTML5规范行为；需用:user-invalid、data-touched或setCustomValidity()配合reportValidity()解决初始误染与自定义校验同步问题。
为什么 :valid/:invalid 在输入框刚聚焦时就触发样式？
因为 HTML5 表单控件（如 <input type="email">）在未输入任何内容时，若设置了 required，空值本身即为无效状态——:invalid 立刻匹配。这不是 bug，而是规范行为：约束验证在元素渲染后即生效，不等待用户交互。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
:user-invalid替代:invalid（Chrome 102+、Firefox 119+ 支持），它只在用户修改过且验证失败时才生效，避免初始误染 - 若需兼容旧浏览器，可配合 JavaScript 监听
input或blur事件，动态添加data-touched类，再用[data-touched]:invalid控制样式 - 对非必填字段（如邮箱可选），去掉
required，改用pattern+ JS 主动调用checkValidity()触发验证
:valid/:invalid 不响应自定义校验逻辑？
:valid 和 :invalid 只响应原生约束（required、type、min/max、pattern 等），无法感知 setCustomValidity() 的结果，除非你显式调用 reportValidity() 或触发原生验证流程。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 调用
element.setCustomValidity("错误信息")后，必须紧接着调用element.reportValidity()才会刷新伪类状态（否则样式不更新） - 若想纯 CSS 响应自定义规则，改用
data-valid属性 + JS 切换：inputElement.dataset.valid = inputElement.checkValidity() && customCheck() - 注意
setCustomValidity("")表示“通过”，而非清空；设为空字符串才能让:valid生效
textarea 和 select 也能用 :valid/:invalid 吗？
可以，但约束能力有限。原生 <textarea> 不支持 pattern 或 type，仅响应 required 和 minlength/maxlength；<select> 仅响应 required（且首个 <option> 的 value="" 被视为无效值）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对
<textarea>做正则校验，必须用 JS +pattern属性模拟：textarea.setAttribute("pattern", "^[a-zA-Z\s]+$")，再配合oninput调用checkValidity() - 确保
<select>的占位选项写成<option value="" disabled selected>请选择</option>，否则required无法正确识别未选状态 - 避免给
<select multiple>设required——多数浏览器不支持多选 required 的原生验证
移动端 Safari 中 :valid/:invalid 样式不更新？
是的，iOS 15.4 之前存在已知问题：输入过程中 :invalid 样式可能卡住不消失，尤其在快速删空内容时。根本原因是 Safari 对输入事件节流导致伪类重绘延迟。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制重绘：在
input事件中加el.style.transform = "translateZ(0)"再立刻设回"none" - 降级策略：对 iOS UA，直接监听
input+blur，用el.classList.toggle("is-valid", el.checkValidity())管理类名，绕过伪类 - 不要依赖
transition动画衔接:valid/:invalid，Safari 可能跳过中间帧
真正麻烦的不是写对伪类，而是搞清什么时候浏览器会“重新评估”有效性——它不总按你敲键盘的节奏来，尤其在输入法上屏、粘贴、自动填充这些场景下，验证时机比想象中更微妙。
