:valid 和 :invalid 伪类仅响应原生HTML5表单验证，需存在required、type、pattern等约束属性才能生效；JS手动校验应改用aria-invalid或data-valid属性配合CSS控制。
为什么 :valid 和 :invalid 伪类不触发样式？
根本原因在于：这两个伪类只响应浏览器原生表单验证（HTML5 Constraint Validation API），不响应 JavaScript 手动设置的 setCustomValidity() 或 DOM 属性变更。如果表单控件没有 required、type="email"、pattern 等约束属性，或者值始终被 JS 清空/重置却未触发 checkValidity()，浏览器就无法计算出有效的 validity 状态，:valid/:invalid 自然不会生效。
必须确保 HTML 层面存在可触发验证的约束属性
仅靠 CSS 写 :invalid { border-color: red; } 是无效的，前提得让元素“能被验证”。常见遗漏点：
-
<input>缺少required、type（如email、url、number）或pattern -
<textarea></textarea>或<select></select>没有required，且无其他约束（select的required只对非空value生效，需确保默认<option></option>的value=""） - 自定义组件（如封装的
<my-input></my-input>）未透传原生约束属性，导致内部<input>实际没绑定验证逻辑
用 [aria-invalid] 或 [data-valid] 配合 JS 主动控制状态
当需要脱离原生验证流程（比如异步校验、组合字段校验），推荐用属性匹配替代伪类。这样可控、可预测，也兼容旧浏览器：
- JS 校验后显式设置
el.setAttribute('aria-invalid', 'true')或el.dataset.valid = 'false' - CSS 写成
input[aria-invalid="true"] { border-color: #d32f2f; }或input[data-valid="false"] { outline: 2px solid #f44336; } - 注意：用
aria-invalid更语义化，但需配合aria-describedby提供错误说明；data-属性更自由，但需自行管理可访问性 - 务必在每次校验后统一更新属性，避免残留旧状态（例如用户输入中就触发校验，不要等失焦才设）
:valid/:invalid 的样式时机与性能细节
这两个伪类是实时响应的，但触发时机有隐含条件：
立即学习“前端免费学习笔记（深入）”；
- 初始渲染时，若字段为空且
required，多数浏览器会立即应用:invalid；但 Safari 在首次聚焦前可能不渲染，需加:user-invalid兜底（仅 Safari 支持） - 输入过程中，部分浏览器（Chrome）会在每次 keystroke 后重新评估，而 Firefox 可能延迟到失焦——这会导致样式闪烁或不同步
- 避免在
:invalid中写高开销样式（如box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.3);+ 过渡动画），容易引发重绘抖动 - 若同时用 JS 控制和伪类，优先级上内联
style> CSS 属性选择器 > 伪类，容易覆盖失效，建议二选一，别混用
:invalid 就万事大吉，却没检查 HTML 是否真具备验证能力，也没考虑 JS 干预后的状态同步机制。 
