:has()表单联动常失效因仅Chrome 105+/Safari 15.4+/Firefox 103+支持，且必须置于选择器开头（如.form-group:has(input:checked)），不能用于控制非祖先元素；它仅影响自身或祖先，需结构包裹、注意可访问性与性能。
为什么直接用 :has() 做表单联动常失效
因为浏览器支持度和选择器限制：Chrome 105+、Safari 15.4+、Firefox 103+ 才支持 :has()，且它不能出现在选择器开头（比如不能写 :has(input:checked) label），必须作为“容器”的伪类条件。常见错误是试图用它反向控制父级以外的兄弟元素，但 :has() 只能影响其**自身或祖先元素**——也就是说，你只能让某个 div 根据内部 input 状态变样式，不能让另一个不相关的 div 跟着变。
:has() 实现「单选按钮控制描述文案显隐」
这是最稳妥、兼容性友好的场景：把触发控件和目标内容包在同一个容器里，用 :has() 切换目标的 display 或 opacity。
示例结构：
<div class="form-group"> <label><input type="radio" name="plan" value="basic"> 基础版</label> <label><input type="radio" name="plan" value="pro"> 专业版</label> <p class="plan-desc">专业版包含高级分析与 API 访问权限</p> </div>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.form-group .plan-desc { display: none; }
.form-group:has(input[value="pro"]:checked) .plan-desc {
display: block;
}
- 必须用
input[value="pro"]:checked而不是input:checked[value="pro"]，属性选择器要放在伪类前 - 如果多个单选按钮共用
name，:checked会自然互斥，无需额外 JS - 不要用
visibility: hidden替代display: none，否则仍占布局空间，影响表单流
用 :has() 触发「输入校验状态反馈」
适合做实时视觉反馈，比如输入为空时高亮标签、输入有值后加绿色对勾图标。
HTML 结构需保证 label 和 input 在同一父容器内（推荐用 div 包裹）：
<div class="field"> <label for="email">邮箱</label> <input id="email" type="email"> <span class="checkmark">✓</span> </div>
CSS：
.field .checkmark { opacity: 0; transition: opacity 0.2s; }
.field:has(input:not(:placeholder-shown)) .checkmark,
.field:has(input:not(:empty)) .checkmark {
opacity: 1;
}
-
:placeholder-shown在用户输入后失效，但若 input 有默认值或被 JS 清空，它可能不触发；:not(:empty)更可靠，但仅在用户手动输入后生效（不响应初始 value 属性） - 两个条件用逗号分隔，覆盖更多边界情况
- 别依赖
:valid做基础反馈——它只在校验通过时生效，而空输入时:valid是 false，但你通常想先反馈“已填写”，再单独处理校验失败
容易被忽略的性能与可访问性坑
:has() 是 CSS 中少数会触发布局重排的选择器，尤其当它嵌套多层或匹配复杂条件时。更关键的是：它完全不改变 DOM 状态，屏幕阅读器无法感知 :has() 引起的视觉变化。
- 所有靠
:has()显示/隐藏的内容，必须同步用aria-hidden="true/false"控制可访问性，否则视障用户会错过信息 - 避免在
:has()条件里写过于宽泛的选择器，例如:has(*:checked)，这会让浏览器遍历整个子树，拖慢渲染 - 如果联动逻辑超过 2 层（比如 A 控制 B，B 再影响 C），CSS 已经难以维护，该上 JS ——
:has()不是 JS 替代品，只是减少简单交互的 JS 量
真正复杂的表单联动，比如跨字段计算、异步验证、动态选项加载，还是得靠 JS；:has() 的价值在于把那些“改个颜色、显隐一段文字”的小动作，从 JS 里摘出来，让它更轻、更声明式——前提是结构可控、语义清晰、无障碍补全到位。
