:valid/:invalid伪类需表单控件进入“已验证状态”才生效，依赖required、type等原生验证属性，初始空值时部分浏览器延迟应用，须通过blur、submit或javascript调用checkvalidity()触发。
valid/invalid伪类为什么没反应
因为浏览器只在表单控件处于“已验证状态”时才应用这些伪类，不是只要写了就立刻生效。用户没交互过、没提交过、或者没触发验证逻辑，:valid 和 :invalid 都不会激活。
常见错误现象：:invalid 样式始终不出现，哪怕输入明显错误的邮箱；:valid 在页面加载后就亮起，但字段还是空的。
- 必须有
required、type="email"、pattern等原生验证属性，否则无验证逻辑可触发 - 初始为空时，
required字段默认是:invalid（但部分浏览器延迟应用，直到 blur 或 submit） - 用 JavaScript 调用
checkValidity()或提交表单，才能强制进入已验证状态 - 避免仅靠
:valid/:invalid控制关键提示（比如禁用按钮），应同步检查element.validity.valid
如何让valid/invalid实时响应输入
原生行为是“懒验证”：多数浏览器只在失去焦点（blur）或提交时校验，不是每敲一个键都重算。想接近实时，得手动干预。
- 监听
input事件，调用element.checkValidity()，再强制重绘（如切换 class 或触发布局） - 对
type="email"这类，输入中出现@后仍可能无效（缺域名），不能只靠格式猜 - 注意性能：高频
input下反复调用checkValidity()开销小，但配合 DOM 操作（如改边框色）要防抖 - 移动端软键盘回车可能不触发
blur，需额外监听change或submit
valid/invalid和JavaScript validity API的关系
:valid 和 :invalid 的计算结果，基本等价于读取 element.validity.valid，但不完全镜像——比如 valueMissing 为 true 时，字段也属于 :invalid，但你可能只想在“用户输过又删光”时高亮，而非初始空状态。
立即学习“前端免费学习笔记（深入）”；
-
element.validity是对象，含valueMissing、typeMismatch、patternMismatch等细粒度布尔值 - CSS 伪类无法区分这些原因，
:invalid只要任意一项为 true 就匹配 - 想做差异化样式（比如邮箱错用红色，必填空用橙色），只能用 JS 判断具体 validity 属性 + 动态加 class
- 注意
willValidate属性：如果元素没有验证属性（如没写required），validity始终为true，伪类也不生效
兼容性与CSS写法陷阱
IE 完全不支持 :valid/:invalid，Edge 12+ 支持，现代 Chrome/Firefox/Safari 都没问题。但写法上容易漏掉关键点。
- 必须用属性选择器配合伪类才可靠，比如
input:invalid:not(:placeholder-shown)排除纯空占位状态 - 不要写
input:invalid { border: 1px solid red; }就完事——它会覆盖所有:invalid状态，包括用户还没输过的情况 - 推荐组合：先设默认样式，再用
input:valid:not(:placeholder-shown)和input:invalid:not(:placeholder-shown)覆盖 - 某些旧版 Safari 对
pattern的正则支持较弱，:invalid可能不触发，建议用type="email"或required做兜底
真正难的不是写对伪类，而是判断什么时候该信 CSS、什么时候必须拉 JS 下场——比如“密码两次输入不一致”这种跨字段逻辑，:invalid 根本无能为力。
