:has()是唯一能纯CSS实现表单校验状态驱动父容器样式的方案，如.form-item:has(input:invalid)实时响应原生校验结果，但需确保input为后代元素、添加默认样式作降级，并避免input:focus等不稳定写法，推荐用input:focus-within。
表单校验状态怎么直接驱动父容器样式
不用 JavaScript，:has() 是唯一能从 input:valid 或 input:invalid 反向影响其外层 .form-item 的纯 CSS 方式。浏览器原生校验（如 required、type="email"）触发后，状态会实时更新，:has() 就能立刻响应。
常见错误是把状态写在 input 上却忘了包裹结构：必须确保 input 是父容器的后代（哪怕嵌套多层），否则 .form-item:has(input:invalid) 不生效。
-
.form-item:has(input:invalid)→ 父容器红边框，表示当前有未通过校验的 input -
.form-item:has(input:valid)→ 绿边框，但注意：只要有一个 valid 就匹配，不是“全部 valid” - 若需“所有必填项都 valid 才高亮成功态”，得配合
:not(:has(input:invalid))，而不是只靠:has(input:valid)
为什么 :has(input:focus) 有时不生效
:has(input:focus) 看似合理，但实际容易失效——焦点事件本身是瞬时的，且某些浏览器（尤其是旧版 Safari）对 :focus 在 :has() 中的支持存在延迟或竞态问题。更稳定的做法是用 :has(input:focus-within)，它检测的是整个子树是否获得焦点，容错性更强。
另外，input 若被设为 display: none 或 visibility: hidden，则无法触发 :focus，:has() 自然也匹配不到。隐藏 input 时建议改用 opacity: 0; position: absolute; 等不影响焦点获取的方式。
立即学习“Java免费学习笔记（深入）”；
- ✅ 推荐：
.form-item:has(input:focus-within) - ❌ 风险高：
.form-item:has(input:focus)（尤其在移动端软键盘收起瞬间易断连） - 别忘了加
transition，否则边框颜色切换会生硬
:has() 在表单中如何处理 placeholder 和空值区分
仅靠 :has(input:invalid) 会在用户还没输入时就报错（因为 required 字段初始即 invalid）。要实现“失焦后才提示”，得组合 :not(:has(input:focus))；要区分“空占位符”和“已输入”，得用 :placeholder-shown。
注意：:placeholder-shown 只对带 placeholder 属性的 input 有效，且在用户输入任意字符后立即失效——它不等同于“值为空”，而是“placeholder 文本正显示”。所以真实可用的判断链是：
-
.form-item:not(:has(input:focus)):has(input:invalid):not(:has(input:placeholder-shown))→ 失焦 + 无效 + placeholder 已消失 → 显示错误 -
.form-item:has(input:valid):not(:has(input:placeholder-shown))→ 已输值且校验通过 → 显示成功态 - 不要写
:has(input[value=""])——value是属性，不是伪类，CSS 无法读取 DOM 属性值
兼容性和降级策略必须提前考虑
截至 2026 年 8 月，:has() 在 Chrome 105+、Firefox 121+、Safari 15.4+、Edge 105+ 均已稳定支持。但 IE 完全不支持，旧 Android WebView（如 Android 10 及以下系统自带浏览器）也基本不可用。
真正容易被忽略的是：当 :has() 规则因不支持而被整条忽略时，你写的备用样式（比如默认边框色）不会自动 fallback —— 它只是不存在。所以必须显式声明基础态：
- 先写
.form-item { border-color: #ccc; }（默认态） - 再写
.form-item:has(input:invalid) { border-color: #f00; }（增强态） - 千万别指望“不支持 :has 就走默认”，因为没声明默认，它可能继承父级或使用浏览器 UA 样式
- 若项目需兼容旧环境，建议用
@supports selector(:has(*))包裹增强规则，避免污染基础样式
