最稳妥的错误态父级高亮写法是.field:has(input:invalid:not(:placeholder-shown))，需确保input有placeholder属性、.field为其祖先元素，并注意构建工具可能过滤该选择器。
能直接实现，但必须写对方向、加好防护条件，否则在 Safari 或旧版 Chrome 里会静默失效。
为什么 :has(input:invalid) 常常不生效
最常见错误是没考虑用户交互时机——浏览器原生校验（required、type="email" 等）默认只在提交或失焦后才触发 :invalid，刚打开页面时所有空输入框其实都是 :valid。直接写 .field:has(input:invalid) 会导致“一打开就高亮”或“一直不高亮”两种误判。
- 用
:not(:placeholder-shown)过滤 placeholder 未被覆盖的空状态，避免误判 - 不要单独依赖
:invalid，它不区分“用户还没输”和“输错了” - Safari 对
:invalid:not(:placeholder-shown)组合支持稳定，但若 input 没设placeholder属性，:placeholder-shown就不会匹配，整个条件失效
.field:has(input:invalid:not(:placeholder-shown)) 的实操要点
这个选择器是当前最稳妥的错误态父级高亮写法，但要注意 DOM 结构和属性配套：
- input 必须有
placeholder属性（哪怕内容为空placeholder=""），否则:placeholder-shown不触发 -
.field必须是 input 的**祖先元素**，不能是兄弟或更远的容器；如果结构是<div class="field"><input></div>才有效 - 避免在
:has()里用太宽泛的选择器，比如.field:has(*:invalid)，这会让浏览器遍历全部子树，拖慢渲染 - 错误提示元素（如
.field__error）要放在.field内部，才能用.field:has(input:invalid:not(:placeholder-shown)) .field__error控制显隐
聚焦态与错误态共存时的样式叠加
用户可能一边输入一边出错，这时候需要让错误态优先于聚焦态，否则边框颜色会打架：
立即学习“前端免费学习笔记（深入）”；
- 把错误规则写在聚焦规则**后面**，利用 CSS 层叠顺序自然覆盖：
.field:has(input:focus)在前，.field:has(input:invalid:not(:placeholder-shown))在后 - 不要试图用
:focus:has(input:invalid)——:has()不能嵌套在其他伪类后面，这种写法所有浏览器都忽略 - 如果想“只在聚焦且出错时才显示红框”，用
.field:focus-within:has(input:invalid:not(:placeholder-shown))，但注意:focus-within在部分安卓 WebView 里支持不全
兼容性兜底和渐进增强策略
Chrome 105+、Safari 15.4+、Firefox 121+ 都已稳定支持，但仍有两点容易被忽略：
- 构建工具（如 PostCSS）默认会删掉不认识的伪类，需确认插件配置允许
:has()通过，或关闭相关 purge 规则 - 服务端渲染（SSR）页面中，如果初始 HTML 里 input 已带
value但没设placeholder，:placeholder-shown就不会匹配，导致首屏错误态不触发——此时得靠 JS 补充一个临时 class - 真正难处理的是动态插入的表单项：用 JS append 的 input 若没立刻触发重排，
:has()可能延迟一帧才生效，建议插入后手动调用getComputedStyle强制刷新
实际项目中最容易翻车的不是语法，而是 placeholder 属性缺失、DOM 层级错位、以及构建工具静默过滤 —— 这三处不检查，写再漂亮的 :has() 也白搭。
