页面一打开所有必填项变红是因为浏览器在dom渲染完成时即对空required字段执行初始校验，使:invalid立即匹配；解决需用:user-invalid（现代浏览器）或js手动控制校验时机。
直接写 input:invalid 会一加载就全红，这不是 bug，是浏览器按标准把空 required 字段判为无效——所谓“实时”，必须靠 JS 主动触发校验状态更新。
为什么页面一打开所有必填项就变红？
因为 :invalid 匹配的是当前校验状态，而空的 required 输入框在 DOM 渲染完成时就已是无效状态。浏览器没等用户操作，就完成了初始校验。
-
input:invalid:not(:placeholder-shown)可临时过滤（前提是加了placeholder属性） - 更干净的解法是用
input:user-invalid：只在用户编辑过且值不满足约束时才匹配，Chrome 102+ / Firefox 119+ / Safari 17.4+ 支持 - 旧环境必须 JS 控制：监听
input或blur，手动加touched类，再写.touched:invalid
为什么 type="number" 输一半就闪红？
type="number" 对中间态极度敏感：输入 "12" 后按 "."、只打 "-"、甚至粘贴含字母内容，都会立刻触发 :invalid，导致边框频繁闪烁。
- 这不是样式问题，是 type 语义与输入过程的天然冲突
- 推荐改用
type="text"+pattern="[0-9]*"（注意 pattern 值不带斜杠） - 若必须保留
type="number"，CSS 中禁用:invalid边框，仅靠 JS 在blur或change时反馈；移动端需额外监听change，因软键盘数字键常不触发blur
怎样让 :focus 和 :invalid 样式不打架？
直接写 input:focus:invalid { border-color: red; } 会覆盖 focus 的高亮效果，尤其在 Windows 高对比度模式下 outline 可能不可见。
- 分离视觉维度：用
border-color表达验证结果，用box-shadow（比outline更稳）表达聚焦状态 - 显式组合规则：
input:focus { box-shadow: 0 0 0 2px #3182ce; }、input:invalid:not(:focus) { border-color: #e53e3e; }、input:focus:invalid { border-color: #e53e3e; } - 禁用
:invalid的过渡：input:invalid { transition: none; }——错误反馈需要明确即时
怎样做到“每敲一个键”都更新样式？
:valid/:invalid 本身不响应 input 事件，浏览器默认只在失焦或提交时校验。所谓“实时”，必须靠 JS 主动调用 checkValidity()。
- 给字段绑定
input事件（别用change，它等失焦） - 回调里调用
el.checkValidity()，强制更新伪类状态 - 如需区分错误类型（比如
valueMissingvstypeMismatch），读取el.validity.valueMissing等属性，再手动加 class - 自定义校验（如用户名唯一性）必须调用
setCustomValidity()，漏一次状态就卡住
真正容易被忽略的点是：校验属性必须存在——required、type="email"、pattern、minlength 缺一不可；type="phone" 这类非法 type 会被降级为 text，直接失去所有校验能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
