:valid和:invalid伪类无反应的根本原因是表单控件缺少原生校验触发条件，即必须是支持约束验证的元素（如input、select、textarea），且需具备校验属性（required、type="email"等）并发生用户交互（focus+blur或输入修改）。
为什么 :valid 和 :invalid 伪类没反应
根本原因通常是表单控件缺少「原生校验触发条件」——这两个伪类只对具有约束验证（constraint validation）能力的 <input>、<select>、<textarea> 生效，且必须满足：有校验属性（如 required、type="email"、minlength 等），且用户已与控件发生交互（focus + blur，或输入后修改）。
常见误判点：
- 写了
type="text"却期望邮箱格式校验 → 必须用type="email" - 加了
required但没失去焦点（:invalid在首次加载时可能不触发） - 使用了自定义组件（如封装的
<MyInput>）→ 原生伪类无法穿透到内部<input> - CSS 选择器权重太低，被其他样式覆盖（比如
input { border: 1px solid #ccc; }覆盖了input:valid的边框色）
:valid 和 :invalid 的生效时机与触发逻辑
它们不是实时监听值变化，而是依赖浏览器的约束验证 API 触发时机。关键行为：
- 页面加载时：空的
required输入框默认为:invalid（除非设了value或placeholder不影响状态） - 用户 focus 后 blur：触发一次验证，状态更新
- 用户输入过程中：仅当输入导致约束从「满足」变为「不满足」或反之，才可能更新（例如从
a@b.c改成a@b，type="email"会变:invalid） -
form.checkValidity()或input.reportValidity()显式调用也会强制更新状态
这意味着：纯靠 CSS 无法实现「输入中实时反馈」，需配合 JS 监听 input 事件手动 toggle 类名（如 is-valid）来补足体验。
立即学习“前端免费学习笔记（深入）”；
必须配对使用的 HTML 属性和 type 值
单独写 :valid 样式不会生效，必须让元素具备可验证性。以下组合是可靠起点：
<input type="email" required>
<input type="url" required>
<input type="number" min="0" max="100">
<input type="date" required>
<input type="tel" pattern="[0-9]{11}">
<textarea required minlength="10"></textarea>
注意：
-
type="text"+pattern是可行的，但pattern正则必须匹配整个值（浏览器自动加^...$） -
type="number"对非数字输入（如字母）直接视为无效，但空值在非required下是:valid -
type="checkbox"和type="radio"仅在required且未选中时为:invalid
调试技巧：快速确认伪类是否被识别
不要只看样式，先验证浏览器是否真认为该元素处于对应状态：
- 在 DevTools 中选中元素，右键 → «Force element state» → 勾选
:valid或:invalid，看样式是否出现 → 排除 CSS 本身问题 - 控制台执行
document.querySelector('input').checkValidity()，返回true/false→ 确认当前验证结果 - 监听事件：
input.addEventListener('invalid', e => console.log('bubbled invalid'))，看是否触发 → 判断是否进入验证流程 - 避免用
!important暴力覆盖，优先提高选择器特异性，例如用input[type="email"]:valid替代单纯input:valid
最常被忽略的是：表单提交失败时，所有 :invalid 元素会获得 :-webkit-autofill 之外的 UA 样式（如红色边框），但这个样式可能被你自己的 reset.css 清掉——检查 user agent stylesheet 是否被覆盖。
