input:invalid没反应是因为该控件未设置required、type="email"、pattern等验证属性，纯text输入框默认始终valid；需确保是原生表单控件且含验证触发条件。
input:invalid 为什么没反应？检查表单控件是否支持验证
input:invalid 不生效，大概率是因为这个 input 没参与原生表单验证。它只对设置了 required、type="email"、pattern 等验证属性的元素起作用，纯文本输入（比如 type="text" 且无其他约束）默认始终是 valid。
- 表单控件必须有验证触发条件：比如
required、minlength="3"、type="email"、pattern="[0-9]{6}" -
textarea和select同样支持:invalid，但需配合required或multiple等 - 自定义组件（如用
div模拟的输入框）完全不响应:invalid，它只认原生可验证表单控件
例如：
<input type="email" required>输入
test 会立刻触发 :invalid；而 <input type="text">即使内容为空，也不会被标记为 invalid。
:invalid 样式被覆盖？优先级和动态状态要分清
:invalid 是伪类，它的样式容易被后续更具体的规则盖掉，尤其是带 !important 的通用重置样式，或者用了 :focus / :hover 组合时顺序写错。
-
:invalid的权重和:valid、:focus相同，谁在后面谁生效 - 浏览器默认会在用户首次提交表单后才开始应用
:invalid（部分浏览器如 Chrome），而不是实时校验——这是为了用户体验，避免用户还没输完就红框 - 如果想“边输边验”，得靠 JS 主动调用
checkValidity()并手动加 class，:invalid本身做不到
常见误写：
input { border: 1px solid #ccc; }<br>input:invalid { border-color: red; }<br>input:focus { border-color: blue; } —— 这里 :focus 会盖掉 :invalid 的红框。改成 input:focus:invalid 或提高 specificity 更稳妥。
立即学习“前端免费学习笔记（深入）”；
兼容性与边界情况：哪些值算 invalid？
:invalid 的判定逻辑由浏览器内置验证规则决定，并非 JS 的 isNaN() 那种宽松判断。比如：
-
type="number"输入"123abc"→ invalid；但输入""（空）+required→ invalid；没required则空值算 valid -
type="email"输入"a@b"→ 大多数浏览器判为 invalid，但"a@b.c"可能通过 -
pattern正则不匹配 → invalid，但注意：pattern 默认是全文匹配，不是包含匹配，要写成pattern="^abc$"而不是pattern="abc"
特别注意：valueAsNumber、valueAsDate 等属性解析失败时也会触发 :invalid，但普通字符串赋值不会——也就是说，JS 改 input.value = "xyz" 不会自动触发状态变更，得调用 input.reportValidity() 或提交表单。
红框只是开始：别漏掉 aria-invalid 和错误文案
光靠 border: 2px solid red 不够。无障碍要求必须同步设置 aria-invalid="true"，否则屏幕阅读器无法感知错误状态；而且用户需要知道“哪里错了”，不能只靠颜色。
- 必须给每个验证失败的
input配一个关联的span或div错误提示区域，并用aria-describedby指向它 - JS 触发验证后，应根据
input.validity对象的具体属性（如valueMissing、typeMismatch、patternMismatch）输出不同提示 - CSS 中可用
input:invalid + .error-message控制提示显隐，但注意 DOM 结构必须相邻且顺序正确
容易被忽略的一点：:invalid 在表单重置（form.reset()）后会自动清除，但手动改 value 不会重置 validity 状态——得调用 input.setCustomValidity("") 才能恢复“未出错”状态。
