根本原因是浏览器未触发:invalid状态，因其仅响应原生表单验证逻辑，需同时满足：控件含required等验证属性、无novalidate、用户已交互（如失焦或提交）。
为什么写了 :invalid 却没变红？
根本原因不是 CSS 写错了，而是浏览器压根没触发 :invalid 状态。它只响应原生验证逻辑，不是“内容为空就变红”。必须同时满足三个条件：
• 表单控件有验证属性，比如 required、type="email"、min="1"；
• 所在的 <form></form> 没有 novalidate 属性；
• 用户已与控件发生交互（部分浏览器如 Safari 在首次加载时不会立即匹配 :invalid，需失焦或提交后才生效）。
:invalid 样式被覆盖了怎么办？
最常见的是 :focus 或 .form-control:focus 的边框色盖过了红色。这不是伪类失效，是层叠顺序问题：
• 不要只写 border-color: red，改用完整声明：border: 1px solid red，避免 border-style 或 border-width 缺失导致视觉异常；
• 如果用了 outline，记得在 :invalid:focus 里显式重置：outline: none，否则红边框 + 蓝 outline 叠在一起；
• 避免依赖继承，显式设置 background-color、color 等，别只靠 color: red。
如何让红框只在用户操作后出现？
直接用 input:invalid 会导致页面一加载所有空 required 输入框就变红，体验差。推荐两种可控时机：
• 用 input:focus:invalid：仅当用户聚焦又输错/删空时才标红；
• 用 input:not(:placeholder-shown):invalid（适用于带 placeholder 的字段）：placeholder 显示时不算无效，用户开始输入后才参与校验；
• 更稳妥的做法是加 JS 控制：给 <form></form> 加 class="js-validated"，首次 blur 或 input 后添加该 class，再写 .js-validated input:invalid。
兼容性差，IE 和老 Edge 不支持，还能用吗？
不能单独依赖 :invalid 做唯一提示手段：
• IE 完全不支持；Edge 12–18 支持但行为不稳定（比如对 type="number" 判定异常）；
• 移动端 Safari 对触发时机更保守，建议搭配 :focus:invalid 增强反馈；
• 若需可靠反馈，必须用 JS：监听 input 或 blur，调用 element.checkValidity()，手动添加 invalid 类，再写对应 CSS；
• 注意：用 setCustomValidity() 自定义校验时，必须调用 reportValidity() 才会触发 :invalid，否则伪类始终不匹配。
立即学习“前端免费学习笔记（深入）”；
