:valid 和 :invalid 无反应的主因是表单控件未设置 required、type、pattern 等验证属性，且需用户 blur 或 submit 后才触发校验；disabled 元素不参与验证，自定义组件无效。
为什么 :valid 和 :invalid 样式没反应
最常见原因是表单控件没启用原生验证 —— 它们只对带 required、type="email"、pattern 等验证属性的元素生效，纯 默认不触发校验状态。浏览器不会主动对空值或任意输入做语义判断。
必须设置验证属性才能触发状态切换
没有验证约束，:valid 始终为 true（初始状态），:invalid 永远不匹配。要让样式动态响应，至少得加一个验证条件：
-
required：非空校验（最轻量） -
type="email"、type="url"、type="number"：类型校验 -
pattern：正则匹配（如pattern="[0-9]{6}"） -
min/max（配合type="number"或"date"）
例如： 才会让输入非法邮箱时激活 :invalid。
用户未交互前样式可能不更新
多数浏览器采用“懒校验”策略：初始加载时元素默认为 :valid，直到用户聚焦（:focus）再失焦（:blur），或提交表单（submit）时才首次计算状态。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 刚打开页面时，即使输入了错误邮箱，
:invalid也不会立即生效 - 用 JavaScript 调用
input.checkValidity()可强制触发，但不会自动刷新 CSS 状态 - 若需实时反馈，得监听
input或blur事件 + 手动增删类名，不能只靠伪类
注意 disabled 和 readonly 的干扰
被禁用的表单控件（disabled）会跳过验证逻辑，:valid/:invalid 都不匹配；readonly 则仍参与校验，但内容不可编辑。另外：
- 自定义组件（如封装的
Input）若用div+span模拟输入框，原生伪类完全无效 - Shadow DOM 内部需在影子根中单独写样式，外部
:valid无法穿透 - 某些旧版 Safari 对
pattern的支持不一致，建议搭配title提示增强兼容性
真正起作用的永远是原生 input、select、textarea 元素本身，且必须有可执行的验证逻辑和用户交互时机。
