纯 css 的 :valid/:invalid 伪类一加载即生效，因浏览器对 required 等原生约束的空值初始判定为无效；延迟反馈需用 :user-invalid（safari 16.4+）或 js 添加 touched 类配合 input.touched:invalid 实现。
纯 CSS 能实现基础验证反馈，但直接用 :valid 和 :invalid 会立刻在空值时显示错误样式——这不是 bug，是规范行为，得靠组合选择器或 JS 控制时机才能避免“一打开就红边框”。
为什么 :invalid 一加载就生效？
浏览器对 :invalid 的判定基于原生约束（如 required、type="email"），且**空的 required 输入框初始即匹配 :invalid**。用户还没动手指，红色边框已经出现。
-
input:required加了required属性 → 初始空值 → 立刻:invalid -
input:type="email"值为""或"abc"→ 失焦前不触发，但一旦失焦就计算 → 可能闪红 -
textarea:invalid必须带pattern或required才生效，否则伪类永远不匹配
如何延迟反馈，只在用户操作后才显示？
用 :user-invalid 最干净，但它在 Safari 16.4+ 才稳定支持；兼容方案是监听事件加 class，再配合伪类过滤。
- 推荐写法：
input.touched:invalid—— 先用 JS 在input或blur时加touched类 - 折中纯 CSS 方案：
input:not(:placeholder-shown):invalid，前提是用了placeholder，且用户已输入过内容 - 慎用
:focus:invalid：聚焦时强制显示错误，但用户可能只是刚点进来，还没输，体验反而更差
:valid/:invalid 样式怎么不和 :focus 冲突？
别把验证状态和焦点状态混在一个声明里，比如 input:focus:invalid { border-color: red; } 会吃掉 focus 的 outline。要分层控制。
- 验证用
border-color，焦点用outline或box-shadow（后者更可靠，尤其高对比度模式） - 示例：
input:invalid:not(:focus) { border-color: #e53e3e; }+input:focus { outline: 2px solid #3182ce; outline-offset: 2px; } -
input:focus:invalid可以叠加边框色，但不要移除 outline，否则键盘用户无法感知焦点
为什么父容器没法响应 :invalid？
:valid 和 :invalid 是元素级伪类，只能作用于 input、select、textarea 本体，不能向上影响 label 或包裹它的 div。
- 想让整个表单项变色？必须用 JS 给父容器加
is-invalid类，再写.form-group.is-invalid input规则 - 用
:has(input:invalid)可行，但目前仅 Chrome/Firefox 支持，Safari 仍不稳定（截至 2026 年 7 月） - 相邻兄弟选择器有限：
input:invalid + label只能影响紧挨着的label，且要求label在input后面
真正容易被忽略的是：伪类反馈永远滞后于 JS 校验——比如异步邮箱唯一性检查、密码强度实时评分、跨字段联动（确认密码需匹配），这些都必须靠 JS 设置状态类，CSS 只负责“画出来”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
