:valid 和 :invalid 无反应的主因是表单控件未设置 required、type、pattern 等验证属性，且需用户 blur 或 submit 后才触发校验；disabled 元素不参与验证，自定义组件无效。
为什么 :valid 和 :invalid 样式没反应
最常见原因是表单控件没启用原生验证 —— 它们只对带 required、type="email"、pattern 等验证属性的元素生效，纯 <input> 默认不触发校验状态。浏览器不会主动对空值或任意输入做语义判断。
必须设置验证属性才能触发状态切换
没有验证约束，:valid 始终为 true（初始状态），:invalid 永远不匹配。要让样式动态响应，至少得加一个验证条件：
-
required：非空校验（最轻量） -
type="email"、type="url"、type="number"：类型校验 -
pattern：正则匹配（如pattern="[0-9]{6}"） -
min/max（配合type="number"或"date"）
例如：<input type="email" required> 才会让输入非法邮箱时激活 :invalid。
用户未交互前样式可能不更新
多数浏览器采用“懒校验”策略：初始加载时元素默认为 :valid，直到用户聚焦（:focus）再失焦（:blur），或提交表单（submit）时才首次计算状态。这意味着：
