:valid/:invalid 伪类需HTML约束属性触发，无required等属性则不生效；初始空required字段默认:invalid；延迟验证因浏览器差异；可用:placeholder-shown或:focus控制提示时机；JS校验须调用setCustomValidity()更新状态。
为什么写了 :valid 和 :invalid 却没反应
根本不是 CSS 写错了，而是 HTML 没达标 —— 这两个伪类只响应浏览器原生验证状态，而验证是否发生，取决于你有没有配对的约束属性和用户交互。
-
required、type="email"、pattern="[0-9]{6}"、minlength="2"至少得有一个，否则元素默认始终是:valid -
type="text"是无校验型，加了pattern也得确保写法正确（比如pattern="[a-z]+"，不能带/开头结尾） - 刚打开页面时，空的
required输入框会立刻匹配:invalid，这不是 bug，是规范行为 - 没聚焦过、也没失焦（
blur）的字段，Chrome/Firefox 可能延迟计算状态；Safari 更激进，常在首次聚焦前不触发
怎么让红/绿边框只在用户操作后才出现
避免一开页就满屏红框，关键不是禁用伪类，而是用更细粒度的选择器控制生效时机。
- 用
input:invalid:not(:placeholder-shown)：前提是设置了placeholder，且用户输过内容又删空或输错才标红 - 用
input:focus:invalid或input:focus:valid：只在聚焦状态下反馈，适合轻量提示 - 现代方案可试
input:user-invalid（Chrome 102+ / Firefox 119+），但 Safari 当前仍不支持，不能单独依赖 - 别用
:focus:invalid做唯一判断——用户聚焦后立刻删空，也会触发，体验断层
JS 自定义校验后 :invalid 不更新？只差一步调用
手动检查用户名是否重复、是否已注册，光改 value 或加 class 没用。:valid/:invalid 只认表单 API 的状态。
- 每次校验都必须调用
input.setCustomValidity("错误信息")：传非空字符串 → 触发:invalid；传空字符串""→ 恢复为:valid - 漏掉
setCustomValidity("")，状态就会卡死，后续输入也无法恢复绿色 - 想让样式立刻更新（比如服务端返回“已被占用”），补一句
input.reportValidity()，但它会弹默认气泡，影响流程；仅需样式变化时，可省略，等用户下次blur或input事件自然触发 - 注意：
reportValidity()会强制重算，但checkValidity()不会刷新 CSS 状态，它只返回布尔值
混用 JS 类名和伪类容易踩坑
内联 style > 属性选择器（如 [aria-invalid]） > 伪类（:invalid），优先级冲突很常见。
立即学习“前端免费学习笔记（深入）”；
- 推荐二选一：要么纯靠原生伪类 + HTML 约束，要么用
aria-invalid或data-valid配合 JS 主动控制，别混用 - 如果用了
aria-invalid，记得同步设置aria-describedby指向错误文案，保障可访问性 -
:invalid中避免写高开销样式（比如带box-shadow+transition），Chrome 下频繁重绘可能抖动 - Safari 对
:valid/:invalid的初始渲染最保守，若需强一致性，得靠 JS 在DOMContentLoaded后手动调一次checkValidity()并classList.toggle
