:has(:checked) 失效主因是违反祖先限制或跨dom边界；正确用法需确保目标元素为:checked元素的真实后代或后续兄弟，且结构须支持祖先匹配逻辑。
为什么直接写 :has(:checked) 有时不生效
浏览器对 :has() 的支持有明确限制：它不能出现在选择器开头以外的位置，且父元素必须是 :checked 元素的**真实祖先**（不能跨 Shadow DOM，也不能是兄弟关系）。最常见失效场景是试图用 label:has(input[type="checkbox"]:checked) 去控制另一个无关 div 的样式——这违反了 CSS 选择器“从右向左匹配”的规则，:has() 无法反向查找非祖先节点。
全选联动的核心约束是：被控制的“全选框”和“子项列表”必须有共同父容器，且全选状态需通过该父容器的某个后代 input:checked 来触发判断。
全选框控制子项样式的正确写法
假设结构是：<div class="list">
<input type="checkbox" class="select-all"><div class="item"><input type="checkbox"></div>
</div>。要让所有 .item 在 .select-all 选中时加背景色，必须让 .item 是 .select-all 的后代或同级后续兄弟（用 ~）。
-
.list:has(.select-all:checked) .item—— ✅ 可行，.item是.select-all的后代 -
.list .select-all:checked ~ .item—— ✅ 可行，前提是.item在.select-all后面且同级 -
.list:has(.select-all:checked) + .item—— ❌ 不行，+要求紧邻，但.item通常在.select-all内部或嵌套更深 - 用
:has()控制外部独立容器（如顶部工具栏）—— ❌ 不可行，超出祖先范围
子项全选时反向高亮全选框的写法
这是更常见的需求：当所有子项都勾选时，让顶部的“全选框”显示为半选或高亮。CSS 本身无法计数，但可以靠“部分未选”来反推——只要有一个子项未选，就隐藏全选框的“全选态”样式。
关键技巧是利用否定逻辑：.list:not(:has(.item input:not(:checked))) .select-all 表示“不存在未勾选的子项”，即全部已勾选。此时可给 .select-all 加样式（比如 border-color: #4CAF50）。
- 必须确保每个子项
.item内都有且仅有一个input[type="checkbox"]，否则:not(:checked)匹配会出错 - 如果子项用的是
input[type="radio"]或混合类型，:not(:checked)会误判，需统一类型 - 该写法在 Safari 15.4+、Chrome 105+、Firefox 121+ 可用；旧版浏览器需回退到 JS 监听
兼容性兜底与性能注意点
:has() 是较新的伪类，目前 Edge/Chrome/Firefox/Safari 最新版均支持，但 iOS Safari 15.4 以下、Android WebView 旧版本仍不支持。若需兼容，不能只依赖 CSS。
- 服务端渲染或静态页面可加
data-all-checked="true"类，由 JS 维护，CSS 写成.list[data-all-checked="true"] .select-all - 避免在大列表（>200 项）中高频使用
:has()，某些浏览器下可能触发重排性能下降 -
:has(.item input:checked)比:has(.item input:not(:checked))性能稍好，因为匹配成功更早终止
真正难的不是写对选择器，而是理清 DOM 层级是否允许祖先匹配——多数失败案例，根源都在 HTML 结构没按 :has() 的语义组织。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
