:invalid伪类仅在表单控件含校验属性（如required、type="email"）且值不满足时生效；空输入框不触发，除非带required；推荐用:user-invalid替代以提升体验；需注意浏览器兼容性及嵌套选择器精准性。
:invalid 伪类能直接匹配原生验证失败的表单控件，但**它不会自动生效——必须配合 required、type="email"、min/max、pattern 等校验属性，否则样式完全不触发。**
为什么写了 input:invalid { border: 2px solid red; } 却没反应
最常见原因是表单元素根本没声明任何校验规则。浏览器只对「有约束且当前值不满足」的控件应用 :invalid，空输入框 ≠ 无效，除非它带 required。
- 检查 HTML 是否含
required、type="email"、minlength="6"等属性；form元素不能有novalidate -
textarea和select[multiple]同样支持:invalid，但select单选需配合required+ 空<option></option>才会触发 - 旧版 Safari 对
:invalid的属性支持有限：优先用border-color，慎用background或box-shadow，必要时加!important覆盖框架重置样式
避免页面一加载就标红：用 :user-invalid 替代
:invalid 在页面载入后立即匹配空的 required 输入框，用户还没动就红了，体验差。:user-invalid 更合理：只在用户编辑过且值非法时才生效。
- 现代浏览器已普遍支持：
Chrome 102+、Firefox 119+、Safari 16.4+ - 写法和
:invalid完全一致，只需替换伪类名：input:user-invalid { border-color: #d32f2f; } - 若需兼容更老版本，可用 JS 在
blur或submit后给form加.touched类，再写.touched input:invalid
精准匹配顶层无效元素：避开嵌套污染
在 Angular 等框架中，.ng-invalid 可能出现在任意嵌套层级。直接写 .ng-invalid:not(.no-check) 会误选子元素，因为 :not() 不识别祖先关系，且 .ng-invalid * 是非法语法。
- 给目标区域包一层语义容器，如
<div class="form-section"> <li>用子选择器 <code>>限定层级：.form-section > .ng-invalid:not(.no-check) - 该选择器只命中
.form-section的**直系子元素**中带.ng-invalid且不带.no-check的节点，彻底避开深层嵌套干扰
真正难的是状态语义的区分——:invalid 无法区分“用户没填”和“用户填错了”，也无法反映 setCustomValidity() 设置的自定义错误。如果业务需要精确控制反馈时机或文案，CSS 伪类只能做辅助，核心逻辑还得靠 JS 驱动。
