:valid/:invalid 在输入框加载后即根据初始值触发原生验证，空值或格式错误会使 input:invalid 立即生效；应结合 :placeholder-shown 区分未交互与已验证失败状态，用 input:invalid:not(:placeholder-shown) 精准控制样式。
为什么 :valid/:invalid 在输入框刚聚焦时就触发？
因为浏览器默认会在表单元素加载后立即根据初始值（包括空值）执行原生验证逻辑。required、type="email"、pattern 等属性会直接让空 在未交互时就处于 :invalid 状态——这导致用户还没输，红色边框就出现了。
解决思路不是禁用原生验证，而是用 CSS 把“未交互”状态和“已验证但失败”状态区分开：
- 用
:placeholder-shown匹配尚未输入内容的空字段（需配合placeholder属性） - 组合写成
input:invalid:not(:placeholder-shown)，只对「已输入但格式错误」生效 - 确保所有需要验证的
都带placeholder=" "（空格即可，避免视觉干扰）
:valid/:invalid 能响应哪些 HTML5 验证属性？
它们只响应由浏览器原生验证机制触发的状态变化，不响应 JavaScript 手动调用 setCustomValidity() 后的即时样式更新（需额外触发 checkValidity() 或用户交互）。
实际生效的验证源包括：
-
required：空值即:invalid -
type="email"、"url"、"number"等：格式不匹配即:invalid -
min/max（对number、date）、minlength/maxlength、pattern -
step（仅当值为数字且非空时参与验证）
注意：type="text" 加 pattern 仍会触发 :valid/:invalid；但纯 JS 校验（如监听 input 事件 + setCustomValidity）不会自动刷新伪类，除非用户再次触发验证流程（比如失焦、提交）。
如何避免 :invalid 样式干扰用户体验？
直接给 input:invalid 加红框，很容易让用户误以为“系统出错了”，尤其在多字段表单中。更稳妥的做法是：
- 默认不显示任何验证样式（不设
input:invalid规则） - 只在
form:has(input:invalid:not(:placeholder-shown))下统一显示底部提示条（现代浏览器支持） - 或退而求其次，在
input:focus:invalid:not(:placeholder-shown)时才高亮当前字段 - 搭配
transition控制边框/颜色变化节奏，避免闪烁感（例如border-color 0.2s ease）
别忘了用 :valid 做正向反馈：比如 input:valid:not(:placeholder-shown) 显示绿色对勾图标（通过 ::after），但仅限用户已输入且通过验证的字段。
兼容性与 fallback 注意事项
:valid 和 :invalid 在所有现代浏览器中都可用（Chrome 10+、Firefox 4+、Safari 5+），但 :placeholder-shown 在 Safari 9–13.1 中有 bug（空格 placeholder 不触发），iOS Safari 14.5+ 才稳定。
如果必须支持旧版 Safari：
- 改用 JS 监听
input事件，动态添加class="touched"，再写input.touched:invalid - 避免依赖
:has()，它在 Safari 15.4+ 才支持，且部分邮件客户端完全不解析 -
pattern的正则需用^和$包裹（如pattern="^[a-z]{3}$"），否则可能误判
最常被忽略的一点：表单提交时，即使 JS 阻止了默认行为，浏览器仍会强制触发一次 checkValidity() 并应用 :invalid 样式——所以不要指望靠 event.preventDefault() 就能绕过原生反馈逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
