如何用CSS :has()伪类根据单选框选项隐藏非关联表单字段-css教程-PHP中文网

:has()无法直接隐藏非关联字段，因其仅支持向上查祖先、向左查兄弟，不能跨dom结构匹配；须将单选框与字段置于同一父容器，用data-show-if标记并配合:has(input:checked)精准控制显隐。

如何用css :has()伪类根据单选框选项隐藏非关联表单字段

为什么 `: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></fieldset> 或 <form></form> 下，并给每个字段加 data-show-if 属性标记其激活条件：

然后用 :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 控制：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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 类控制。