:valid和:invalid不实时触发，因浏览器默认仅在失焦或提交时更新状态；需结合input事件与JS手动同步类名才能实现输入中实时反馈，且必须有required等原生约束属性才生效。
为什么 :valid 和 :invalid 不会实时触发？
浏览器只在表单控件失去焦点（blur）或表单提交时才更新 :valid/:invalid 状态，不是输入即判。这意味着用户边打字边看反馈的体验默认不存在。
- 必须配合
input事件 + JavaScript 手动添加/移除类（如is-valid），才能实现输入中实时校验 -
required、type="email"等原生约束是伪类生效的前提，缺属性则伪类始终为假 - 某些浏览器（如旧版 Safari）对
:user-invalid支持不全，建议用:invalid:not(:placeholder-shown)替代
如何用 :focus-within 高亮整个表单组？
当 <label> 包裹 <input> 时，:focus-within 可让整个容器响应聚焦状态，比单独样式 <input> 更直观。
- 结构必须是：父容器包含
<input>或其可聚焦后代，否则伪类不匹配 - 示例：
<div class="field"> <label>邮箱</label> <input type="email" required> </div>
→ CSS 中写.field:focus-within { border-color: #007bff; } - 注意：IE 完全不支持，需加 JS fallback 或放弃该交互
:placeholder-shown 怎么避免和空值校验冲突？
这个伪类在输入框有 placeholder 且内容为空时为真，常用来区分“未填”和“填了但无效”，但它容易和 :invalid 同时生效，导致样式打架。
- 典型冲突：空邮箱框既匹配
:invalid又匹配:placeholder-shown，若两者都设红框，叠加后看不出变化 - 推荐组合写法：
input:invalid:not(:placeholder-shown)—— 只对已输入但格式错的内容加错误样式 - Chrome 会把
type="number"的空值也视为:invalid，哪怕没输任何字符，此时:placeholder-shown不起作用，得靠 JS 判空
动态反馈里最容易被忽略的可访问性问题
仅靠颜色变化（比如红框变绿框）无法满足 WCAG，屏幕阅读器不会自动读出“验证通过”，也不会感知伪类切换。
立即学习“前端免费学习笔记（深入）”；
- 必须用
aria-live="polite"区域配合 JS 更新文本，例如：<div aria-live="polite" class="sr-only">邮箱格式正确</div> -
aria-invalid要随状态同步设置：input.setAttribute('aria-invalid', !valid)，否则 AT 工具无法传达错误 - 不要用
display: none隐藏错误提示——它会让屏幕阅读器彻底跳过；改用clip-path或visually-hidden类
