✅ 正确写法是父级选择器配合 :has()，如 .form-item:has(input[type="checkbox"]:checked) { display: none; }；❌ 单独 :has() 无效；需注意浏览器兼容性（chrome 105+/firefox 103+/safari 15.4+）、shadow dom 和 display: contents 导致失效。
用 :has() 隐藏已勾选复选框的父容器
直接写 :has(input[type="checkbox"]:checked) 就能定位到包含已勾选复选框的父级元素，再加 display: none 即可隐藏。但注意：浏览器支持度和选择器范围是关键限制。
必须用父级选择器配合 :has()，不能单独写 :has()
:has() 是关系伪类，本身不匹配任何元素，必须挂载在某个祖先选择器后面（比如 div、.module 或 section）。写成 :has(input:checked) 会报错或被忽略。
- ✅ 正确：
.form-item:has(input[type="checkbox"]:checked) { display: none; } - ❌ 错误：
:has(input[type="checkbox"]:checked) { display: none; }（无宿主选择器） - ⚠️ 注意：
input必须是:has()宿主元素的后代（嵌套层级内），不能是兄弟或更远关系
Chrome/Firefox/Safari 最新稳定版基本可用，但 Edge 116+ 才真正可靠
:has() 在 Safari 15.4+、Firefox 103+、Chrome 105+ 支持，但早期版本存在 bug：比如 Safari 15.4–15.6 对 :has(input:checked) 的响应有延迟，切换 checkbox 后需触发重排才生效；Edge 115 及更早版本会完全忽略该规则。
- 检查兼容性时，建议用
npx caniuse-lite或访问 caniuse.com/css-has 查实时数据 - 若需兼容 IE 或旧版 Android WebView，必须降级为 JS 监听
change事件 + 切换 class - 不要依赖
:has()做关键业务逻辑（如权限控制），它只适合 UI 层面的显隐控制
常见失效原因：表单结构嵌套过深或用了 shadow DOM
:has() 无法跨 shadow boundary 匹配，也不能穿透 <slot></slot> 投影内容。如果复选框在自定义元素内部（比如 <my-checkbox></my-checkbox>），外部样式无法用 :has() 捕获其状态。
- ✅ 有效结构：
<div class="card"> <input type="checkbox"><label>…</label> </div> - ❌ 无效结构：
<div class="card"><my-checkbox></my-checkbox></div>（my-checkbox内部的input不会被外层:has()捕获） - ⚠️ 注意：若父容器用了
display: contents，它会从渲染树中移除自身，导致:has()宿主“消失”，规则失效
真正麻烦的不是怎么写，而是判断当前 DOM 结构是否在 :has() 的作用范围内——多一层封装、一个 Web Component、甚至一个 display: contents，都可能让规则静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
