:invalid未生效是因为它仅在字段已验证且失败时触发，初始加载时字段处于“未触碰”状态，即使值非法也不会匹配；需用户交互或手动校验才激活。
为什么:invalid没让边框变红？
因为:invalid只在字段“已验证且失败”时触发，不是一加载就生效。表单刚打开时，浏览器默认不校验，字段处于“未触碰（untouched）”状态，哪怕值本身非法（比如邮箱缺@），:invalid也不会匹配。
常见错误现象：input[type="email"]:invalid { border-color: red; }写对了，但页面一打开边框还是默认色——这不是CSS失效，是时机不对。
- 必须先触发校验：用户输入后失去焦点（
blur）、提交表单、或手动调用checkValidity() -
required、type="email"、pattern等约束必须存在，否则没有“无效”概念 - 某些旧版 Safari 对
:invalid的初始状态处理不一致，建议搭配:user-invalid（见下一条）
:user-invalid比:invalid更靠谱吗？
是的。:user-invalid 是 CSS Selectors Level 4 新增伪类，在 Chrome 102+、Firefox 109+、Safari 16.4+ 支持，它会在用户与字段交互后（输入、删除、粘贴等任意修改），立即基于当前值判断有效性，不依赖 blur 或 submit。
使用场景：想让用户一输错就立刻看到红色边框，而不是等点到别处才变色。
立即学习“前端免费学习笔记（深入）”；
- 兼容性注意：IE 完全不支持，Edge 旧版也不行；若需覆盖老浏览器，得回退到 JS 监听
input+setCustomValidity - 可以和
:invalid共存：input:invalid, input:user-invalid { border-color: red; }，现代浏览器走后者，老浏览器走前者 - 它不会误标“空但非必填”的字段——只有值存在且违反约束时才触发
怎么避免“所有字段一加载就红”？
直接写 input:invalid { border-color: red; } 在部分浏览器（尤其是带自动填充的 Chrome）下，可能让刚加载的空 required 字段立刻变红——这会吓到用户，也违背“先输入再反馈”的交互直觉。
关键思路：加一层状态控制，区分“未操作”和“操作后无效”。
- 给表单加初始 class：
<form class="js-validated">，JS 在第一次交互后添加该 class - CSS 写成：
.js-validated input:invalid { border-color: red; }，确保只在用户动过之后才启用样式 - 或者用
:not(:placeholder-shown)（适用于有 placeholder 的非空字段）：input:not(:placeholder-shown):invalid { border-color: red; }
border-color 红了，但其他样式被覆盖怎么办？
:invalid 和 :user-invalid 的优先级和普通属性一样，如果之前定义了 input:focus { border-color: blue; }，那聚焦时蓝色会盖过红色——这不是伪类失效，是层叠顺序问题。
性能影响几乎为零，但兼容性陷阱藏在细节里：
- 务必检查是否用了
!important覆盖了伪类规则；优先级不够时，把选择器写具体些，比如input[type="email"]:invalid比input:invalid更高 - 某些 UI 库（如 Bootstrap）会给
input.is-invalid加边框，此时 CSS 伪类可能被 JS 动态 class 压制，建议统一用 JS 控制状态，或重置库的默认样式 - 移动端键盘弹出时，iOS Safari 可能临时忽略
:invalid样式，这是渲染 bug，目前无完美解，可加transition: border-color 0.1s缓解突兀感
真正麻烦的不是怎么写红边框，而是搞清“什么时候算无效”——浏览器标准、用户行为、框架干预，三者交叠处最容易漏掉边界情况。
