:valid/:invalid一加载就变红是因为浏览器将空的required输入框默认判为无效，这是规范行为而非bug；type="number"输一半报错是因中间态被判定为无效；实时反馈需js调用checkvalidity()触发伪类更新。
为什么:valid/:invalid一加载就变红？
因为浏览器把空的 required 输入框默认判为无效，:invalid 立刻匹配。这不是 bug，是规范行为——只要带约束，初始空值即失效。
常见错误现象：页面刚打开，所有必填框全红；用户还没点进去，就收到错误暗示。
- 用
input:invalid:not(:placeholder-shown)可过滤掉有 placeholder 的纯空状态（但 placeholder 本身不能替代校验） - 更可靠的是改用
:user-invalid：只在用户编辑过且当前值不满足约束时触发，Chrome 102+ / Firefox 119+ / Safari 17.4+ 支持 - 兼容旧环境必须靠 JS：监听
input或blur，手动加touched类，再写.touched:invalid
如何让边框变色不覆盖:focus高亮？
直接写 input:focus:invalid { border-color: red; } 会吃掉 focus 样式，因为 border 覆盖了 outline 或 box-shadow。
关键不是“怎么加红”，而是“怎么分层表达状态”：
- 用
border-color表达验证结果（合法绿 / 非法红） - 用
outline或box-shadow表达聚焦状态（推荐box-shadow，Windows 高对比模式下更稳） - 显式写出组合规则，例如：
input:focus { box-shadow: 0 0 0 2px #3182ce; } input:invalid:not(:focus) { border-color: #e53e3e; } input:focus:invalid { border-color: #e53e3e; }
type="number"为什么输一半就报错？
type="number" 对中间态极度敏感：输入 "12" 后按 "."，或只打 "-"，都会立刻变成 :invalid，导致边框频繁闪烁。
这不是样式问题，是 type 语义与输入过程的天然冲突：
- 解决方案一：改用
type="text"+pattern或 JS 自定义校验，把控制权拿回来 - 解决方案二：保留
type="number"，但 CSS 中禁用:invalid边框，仅用 JS 在blur时才反馈 - 注意：移动端软键盘数字键可能不触发
blur，需额外监听change或表单提交
怎样做到“每敲一个键都实时反馈”？
:valid/:invalid 本身不响应 input 事件——浏览器默认只在失焦或提交时校验。所谓“实时”，必须靠 JS 主动触发。
最简可行做法：
- 给字段绑定
input事件（别用change，它等失焦） - 在回调里调用
el.checkValidity()，强制更新伪类状态 - 如果需要更细粒度控制（比如区分邮箱格式错 vs 必填为空），读取
el.validity.typeMismatch或el.validity.valueMissing，再手动加 class - 避免对每个 keypress 都改 DOM 样式，优先靠伪类驱动；若需动画，给
input加transition: border-color 0.15s，但input:invalid单独设transition: none防止误判
真正容易被忽略的点：伪类只反映 Constraint Validation API 的最终状态，不记录“为什么错”。想做差异化提示（比如邮箱错标红、空字段标橙），只能靠 JS 拆解 validity 对象，没法只靠 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
