:has()无法直接隐藏非关联字段，因其仅支持向上查祖先、向左查兄弟，不能跨DOM结构匹配；须将单选框与字段置于同一父容器，用data-show-if标记并配合:has(input:checked)精准控制显隐。
为什么 :has() 不能直接隐藏“非关联字段”
因为 :has() 只能向上查找祖先、向左查找兄弟（在支持的浏览器中），但无法跨出当前表单结构去匹配“其他字段”。比如你选了 input[value="A"]，想让所有不属 A 的 .field-B、.field-C 隐藏——这些字段和单选框没有 DOM 包含关系，:has() 无法直接定位它们。
真正可行的做法是：把控制逻辑“收束”到共同父容器，并用单选框状态驱动整个容器的样式分支。常见错误是试图写 form:has(input[value="A"]):not(.field-A) { display: none }，这语法非法，:not() 里不能放复合选择器，且 :has() 不支持跨元素匹配。
正确结构：用 name 分组 + 公共父容器 + 属性选择器
把所有单选框和对应字段放在同一个 <fieldset> 或 <form> 下，并给每个字段加 data-show-if 属性标记其激活条件：
<form> <input type="radio" name="plan" value="basic" id="basic"> <input type="radio" name="plan" value="pro" id="pro"> <div class="field" data-show-if="basic">基础版字段</div> <div class="field" data-show-if="pro">专业版字段</div> </form>
然后用 :has() 控制整个表单的“当前模式”，再结合属性选择器显隐字段：
立即学习“前端免费学习笔记（深入）”；
form:has(input[name="plan"][value="basic"]:checked) .field:not([data-show-if="basic"]) {
display: none;
}
form:has(input[name="plan"][value="pro"]:checked) .field:not([data-show-if="pro"]) {
display: none;
}
- 必须用
[name="plan"][value="basic"]:checked精确匹配，漏掉:checked会导致默认全部隐藏 -
.field:not([data-show-if="basic"])是关键：它选中“所有 field 中不带data-show-if="basic"的”，即非关联字段 - 每种选项需单独写一条规则；不支持用变量或通配符动态生成
IE/旧版 Safari 兼容性问题怎么绕开
:has() 在 Safari 15.4+、Chrome 105+、Firefox 121+ 才稳定支持。如果需要兼容 Safari 15.3 或更早版本，得降级为 JS 控制：
document.querySelectorAll('input[name="plan"]').forEach(radio =>
radio.addEventListener('change', () => {
const val = document.querySelector('input[name="plan"]:checked')?.value;
document.querySelectorAll('.field').forEach(el =>
el.hidden = el.dataset.showIf !== val
);
})
);
注意：hidden 属性比 display: none 更安全，不会被 CSS 强制覆盖；但若字段本身有 display: flex 等内联样式，仍建议用 classList.toggle() 配合 CSS 类控制。
多个单选组嵌套时容易漏掉的细节
如果页面有多个 name="plan" 表单（比如不同卡片里的独立配置），上面的 CSS 规则会互相干扰，因为 form:has(...) 会匹配到任意一个满足条件的表单，导致所有同级 .field 被误判。
解决方法只有两个：
- 给每个表单加唯一
id，并把选择器限定为#form-1:has(...)、#form-2:has(...) - 改用
<fieldset>替代<form>作为作用域容器，避免全局 form 匹配污染
另外，:has() 不支持伪类链式调用，像 :has(:checked):has(+ .field) 是无效的——它只认直接子/兄弟关系，不认“之后出现的任意位置”。这点常被忽略，结果写了半天发现样式根本没生效。
