:has()可高亮整个表单项并控制错误提示显隐，需用:valid/:invalid而非:focus/:hover，且依赖Chrome 105+/Firefox 121+/Safari 15.4+；正确写法为.form-group:has(input:not(:placeholder-shown):invalid)，配合结构内嵌.error-msg实现精准反馈。
:has() 配合表单校验能直接高亮整个表单项、控制错误提示显隐，但必须用 :valid/:invalid 而非 :focus 或 :hover，且浏览器需 Chrome 105+ / Firefox 121+ / Safari 15.4+（Safari 15.4–16.3 对兄弟选择器支持不稳）。
表单项容器整体高亮的写法
目标是让 .form-group 在内部 input 校验失败时加红边、背景变浅，而不是只改输入框本身。关键点在于：不能依赖 JS 添加 class，也不能只写 input:invalid —— 它作用域太窄。
-
.form-group:has(input:invalid)是正确起点，但需配合属性约束，否则 placeholder 消失瞬间就触发（误报） - 推荐组合：
.form-group:has(input:not(:placeholder-shown):invalid)，过滤掉“刚删空但还没输”的中间态 - 若字段带
required，可进一步收紧为：.form-group:has(input:not(:placeholder-shown):invalid:not(:valid))，避免:invalid在空值提交后才生效导致延迟反馈 - 别写
.form-group:has(input:focus:invalid)——:focus在:has()中被静默忽略，整条规则无效
错误提示的显示与隐藏逻辑
错误消息元素（如 .error-msg）默认应设为 display: none，否则首次渲染会闪一下。用 :has() 控制它显隐时，要确保结构在同一父级下。
- ✅ 正确结构：
<div class="form-group"> <label>邮箱</label> <input type="email" required> <div class="error-msg">请输入有效邮箱</div> </div>
对应规则：.form-group:has(input:invalid) .error-msg { display: block; } - ❌ 错误结构：把
.error-msg提到.form-group外层，:has()查不到它，样式不生效 - ⚠️ 注意：如果多个
input共享一个.error-msg（如密码确认），得用更宽泛的选择器，例如.form-group:has(input[type="password"]:invalid)，但要避免误触其他密码字段
多字段联动反馈（如“至少填一项”）
有些场景要求“姓名或手机号至少填一个”，此时不能只靠单个 :invalid，得用存在性判断。
立即学习“前端免费学习笔记（深入）”；
- 用
:has(input:not(:placeholder-shown))检测是否有任意字段已输入，再结合状态控制提示文字 - 例如：
.contact-group:has(input:not(:placeholder-shown)) .hint { opacity: 1; }，默认.hint { opacity: 0; transition: opacity .2s; } - ⚠️ 不要用
:has(input[value!=""])——value属性不会随用户输入实时更新，只读初始值，完全不可靠 - 复杂逻辑（如“手机号和邮箱不能同时为空，但可以只填一个”）仍建议交由 JS 计算并设置
data-validated属性，再用[data-validated="partial"]配合 CSS，比嵌套多层:has()更稳定
Safari 和旧版 Firefox 的兼容性兜底
即使目标用户基本覆盖新浏览器，也要防住 Safari 15.4–16.3 的兄弟选择器 bug 和 Firefox 120 的默认禁用。
- Safari 15.4–16.3 中，
.form-group:has(input:invalid + .error-msg)这类带+的写法可能失效，一律改用后代选择器（ - Firefox 120 需手动开启
layout.css.has-selector.enabled，生产环境不能依赖，建议加一层 JS fallback：检测CSS.supports('selector(:has(*))')，不支持时动态加 class - 所有
:has()规则一旦含非法伪类（如:hover），整条 CSS 会被浏览器静默丢弃 —— DevTools 的 Styles 面板里根本看不到它，调试时先检查语法是否“静态可判定”
真正难的不是写对一行 :has()，而是想清楚哪些状态必须由 JS 接管：比如远程校验（用户名是否可用）、异步加载中的 loading 态、或跨多个独立容器的联动。CSS 只适合处理“本地、静态、可预判”的校验反馈，越试图用它覆盖 JS 的职责，就越容易掉进性能抖动和兼容性陷阱。
