:valid/:invalid伪类仅响应原生约束验证，需添加required、type等属性才能生效；若无效，检查隐藏状态、CSS优先级、缺失约束属性或JS未触发重排；JS校验推荐用data-valid属性模拟。
为什么 :valid 和 :invalid 伪类不触发样式？
根本原因在于：这两个伪类只响应表单控件的 原生约束验证状态，而非开发者手动设置的 setCustomValidity() 或 JS 校验结果。如果元素没有 required、type="email"、pattern 等原生校验属性，浏览器不会启动约束验证 API，:valid/:invalid 就永远为 false。
如何让 :valid/:invalid 生效？
必须为输入控件添加至少一个触发约束验证的 HTML 属性：
-
required（最常用，空值即 invalid） -
type="email"、type="url"、type="number"等语义化类型 -
min/max（对type="number"或type="date"有效） -
pattern（配合正则，如pattern="[0-9]{6}"）
例如：
<input type="email" required>此时输入非法邮箱或留空，
:invalid 立即生效；输入合法邮箱后，:valid 生效。
为什么加了 required 还是没反应？
常见干扰项：
- 元素被
display: none或visibility: hidden—— 伪类仍计算，但样式不可见 - CSS 优先级被其他规则覆盖（比如
input { border: 1px solid #ccc; }覆盖了input:valid { border-color: green; }），建议用!important快速验证是否为优先级问题 - 使用了
input[type="text"]却没加任何约束属性 ——:valid永远为 true（无约束即“满足”），:invalid永远为 false - 通过 JS 调用
setCustomValidity('')后未调用reportValidity()或未触发重排，浏览器可能未刷新伪类状态
用属性选择器模拟校验状态（兼容性兜底方案）
当必须依赖 JS 校验逻辑，或需支持旧浏览器时，可改用自定义属性 + CSS 属性匹配：
- JS 中根据校验结果设置：
input.setAttribute('data-valid', 'true')或input.dataset.valid = 'false' - CSS 中写：
input[data-valid="true"] { border-color: #28a745; }<br>input[data-valid="false"] { border-color: #dc3545; } - 注意：不要用
data-valid的存在与否做判断（input[data-valid]），因为属性存在但值为空字符串时也会匹配，应显式比对值
这种方式完全绕过约束验证 API，可控性强，但需确保每次校验后都同步更新属性 —— 容易漏掉 blur、input、submit 多个触发时机。
