根本原因是表单控件未启用原生验证机制，如缺少required、type等约束属性，或设置了novalidate；动态设value后需手动checkValidity()或触发input事件才能激活验证状态。
为什么 :valid 和 :invalid 有时不触发样式？
根本原因通常是表单控件没启用原生验证机制。比如 缺少 required、type="email" 等约束属性，或被设置了 novalidate；又或者用了 value 属性初始化但未触发输入事件，导致浏览器未进入验证状态。
实操建议：
- 确保输入框有至少一个验证约束：如
required、pattern、minlength、type="url"等 - 避免在
上写novalidate，除非你完全接管 JS 验证 - 动态设置
value后，手动调用inputElement.checkValidity()或触发input事件来激活状态
::placeholder 与 :valid/:invalid 能否共存？
可以，但要注意伪元素层级和样式优先级。::placeholder 只在输入为空且未聚焦时显示，而 :valid 在值符合规则后生效——两者不互斥，但视觉上可能“覆盖”或“冲突”。
常见问题：
立即学习“前端免费学习笔记（深入）”；
- 写了
input:valid::placeholder { color: transparent; }，结果 placeholder 消失了，但用户看不出是否已通过验证 - 误以为
:valid会自动隐藏 placeholder，其实不会；它只影响元素本身样式
推荐做法：用边框/图标/背景色区分状态，而不是依赖 placeholder 的显隐。
配合 ::before 或 ::after 显示验证图标时的限制
:valid 和 :invalid 是元素级伪类，可安全搭配 ::before/::after，但有两个硬性前提：
- 目标元素必须是「可生成伪元素」的（即
display不为none，且不是替换元素如） -
默认是替换元素，::before/::after对它无效；必须改用包裹或切换为contenteditable元素才能生效
更稳妥的替代方案：
input:valid + .icon::before {
content: "✓";
color: green;
}
即把图标放在兄弟元素上，由输入状态控制其样式。
JS 手动触发验证后，CSS 状态为何没更新？
CSS 的 :valid/:invalid 完全依赖浏览器的内置验证反馈，JS 调用 setCustomValidity("") 或 reportValidity() 会触发，但直接改 value 或调用 checkValidity() 不会自动刷新伪类——后者只是返回布尔值，不改变 DOM 状态。
关键点：
-
input.setCustomValidity("")清空自定义错误后，:valid会在下一次输入/失焦时恢复（取决于当前值是否满足约束） - 若需立即响应，可配合
input.reportValidity()强制校验并触发 UI 更新 - 避免在 JS 中反复调用
setCustomValidity("xxx")后不调用reportValidity()，否则 CSS 状态会滞后
复杂点在于：浏览器对“脏值”（dirty value）的判定逻辑不透明，失焦（blur）仍是多数场景下最可靠的触发时机。
