:invalid用于匹配未通过HTML5原生验证规则（如required、type="email"、pattern等）的表单元素，须至少含一个校验属性才生效；初始空值必填字段即触发，依赖浏览器内置验证而非JS，且disabled/readonly元素不参与校验。
怎么用 :invalid 选择器判断表单验证状态
:invalid 不是“让元素失效”，而是匹配当前**未通过内置表单验证规则**的 <input>、<select>、<textarea> 元素。它依赖浏览器原生验证（如 required、type="email"、minlength 等），不是 JS 手动触发的验证结果。
常见误操作：给没加验证属性的输入框写 :invalid { color: red; }，但样式完全不生效——因为没验证规则，浏览器认为它“永远有效”。
- 必须至少带一个验证属性，比如
required、type="email"、pattern="\d{6}" - 初始加载时，空的
required输入框就处于:invalid状态（哪怕用户还没操作） -
:invalid在用户修改后会动态更新，但不会等提交才计算——每次输入/失焦都可能触发重评估
:invalid 和 :valid 的触发时机差异
两者不是互斥开关。例如一个 type="email" 输入框：""（空）→ :invalid；"abc" → :invalid；"a@b.c" → :valid。但如果是 required + type="email"，空值和非法格式都会进 :invalid。
-
:invalid会在表单控件值违反任一约束时激活，包括：缺失必填、格式错误、超出范围、不满足 pattern -
:valid只有在所有约束都满足时才生效；只要有一条不满足，就是:invalid - 注意：
disabled或readonly元素**不会被验证**，因此也不会匹配:invalid
为什么加了 required 还不触发 :invalid 样式
最常见原因是表单控件不在文档流中或被隐藏方式干扰了验证逻辑，比如：
立即学习“前端免费学习笔记（深入）”；
- 用了
display: none或visibility: hidden—— 浏览器可能跳过验证，:invalid不计算 - 元素尚未插入 DOM（如 JS 动态创建后没 append）—— 无验证上下文
- 写了
novalidate在<form>上，禁用了整个表单的原生验证 - 用了自定义
inputmode或autocomplete="off"但没配验证属性，纯属无效组合
调试建议：打开开发者工具，在 Elements 面板选中目标 <input>，手动加个 required，看是否立刻出现 :invalid 类名高亮（Chrome DevTools 会显示伪类状态）。
和 JavaScript 的 checkValidity() 怎么配合用
CSS 的 :invalid 是声明式反馈，JS 的 checkValidity() 是命令式检查。两者底层共享同一套验证逻辑，但行为节奏不同：
- 调用
input.checkValidity()会立即返回布尔值，并触发invalid事件（如果验证失败） -
:invalid样式更新通常滞后于 JS 调用——比如你在input.value = ""后立刻读input.validity.valid是 false，但 CSS 可能要等到下一个渲染帧才变 - 想强制同步样式？别试。可靠做法是：用 JS 触发验证后，改 class（如
input.classList.add("force-invalid")），再用 CSS 写.force-invalid:not(:valid)来兜底
真正容易被忽略的是：用户没输过任何内容的 required 字段，初始就是 :invalid，但很多 UI 设计师只在提交失败后才展示错误提示——这会让用户第一次聚焦输入框时毫无预期地看到红色边框，体验断裂。
