:has() 是唯一能跨层级响应子元素状态的 css 选择器，需限定作用范围、避免 firefox 兼容问题及动态更新滞后，复杂逻辑建议 js 补位。
用 :has(input:checked) 控制父容器显隐，但要注意 DOM 位置关系
直接写 nav input:checked + main 是无效的——<main></main> 不是 <input> 的相邻兄弟元素，中间隔着 <header></header> 或其他结构。真正能跨层级影响的是 :has()：它让父/祖先/同级容器“感知”子项状态。.filter-section:has(.status-checkbox:checked) 这类写法才可靠，前提是 .status-checkbox 确实是 .filter-section 的后代（哪怕嵌套多层）。
常见错误是把 :has() 放在太浅的容器上，比如整个 :has(input:checked)，结果一勾就全页面响应。应限定到具体功能区块，如 .product-list:has(.filter-checkbox:checked)。
:has() 配合多个 :checked 实现“且/或”逻辑的写法差异
浏览器不支持 :has(input:checked, input:checked) 这种重复写法来表达“任一选中”，也不支持 :has(input:checked):has(input:checked) 表示“全部选中”。真实可用的模式是：
-
.filters:has(.type-checkbox:checked):has(.price-checkbox:checked)→ 所有指定复选框都必须存在且被选中（“且”逻辑） -
.filters:has(.type-checkbox:checked), .filters:has(.price-checkbox:checked)→ 任一被选中即触发（“或”逻辑，用逗号分隔） - 想实现“至少一个选中但非全部”，只能拆成两条规则组合，或改用 JS 补位
为什么 :not(:has(input:checked)) 在 Firefox 里完全不生效
Firefox 当前稳定版（2026 年 5 月发布）仍不解析 :not(:has(...))，整条 CSS 规则会被丢弃，开发者工具里看不到该样式应用痕迹。这不是语法错，是引擎未实现。Chrome 和 Safari 已支持，但项目若需兼容 Firefox，就得绕开。
替代方案有三个：
- 正向标记默认态：
.results { opacity: 1; }+.results:has(input:checked) { opacity: 0.8; } - 服务端或构建时注入类名，如
.results--no-filters，再写对应样式 - 轻量 JS 判断后加 class：
el.classList.toggle('filtered', checkboxes.some(cb => cb.checked))
动态增删复选框时，:has() 样式可能滞后，尤其在 Safari 中
:has() 是声明式计算，依赖浏览器对 DOM 变更的响应节奏。React/Vue 动态渲染后，Safari 偶尔不会立刻重算 :has() 匹配，导致样式延迟 1–2 帧。
可加一层简单补救：
- 给关键容器加
key或data-filter-count属性，JS 更新后强制触发布局重排（如el.offsetHeight） - 避免在
:has()内混用:nth-child()或复杂伪类，它们在动态场景下重算更不稳定 - 不要指望
:has()替代事件监听——它不提供回调、不触发 reflow、也无法捕获中间态（如半选）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
