因为 :has() 仅在 chromium 105+、firefox 119+、safari 15.4+（部分支持）中可用，且不能用于伪元素、display: contents 元素或跨 shadow dom，旧版浏览器不支持导致失效。
为什么直接写 .parent:has(.child:checked) 不生效
因为 :has() 是 CSS4 新增的逻辑组合伪类，目前仅在 Chromium 内核（Chrome 105+、Edge 105+、Firefox 119+）中稳定支持，Safari 15.4+ 仅部分支持且存在渲染延迟。如果你在 Safari 或旧版 Chrome 中测试失败，大概率是浏览器兼容性问题，不是写法错误。
常见误判点：
– 忘记检查浏览器版本（navigator.userAgent 或 CanIUse 数据）
– 在伪元素（如 ::before）上误用 :has()（它只能用于真实 DOM 元素）
– 父元素未设置 display（比如 display: contents 会破坏父子关系，导致匹配失败）
:has() 的嵌套层级限制与选择器有效性
:has() 只能向上查找直接父级或祖先元素，不能跨 Shadow DOM，也不能匹配兄弟节点。它的参数必须是“可计算的选择器”——即不能含伪元素、不能含 :has() 自身嵌套（Chrome 117+ 才开始实验性支持嵌套 :has()）。
有效写法示例：
.form-group:has(input:focus) { border-color: #007bff; }
.card:has(.badge.status-error) { background: #fff8f8; }
无效写法示例（会静默失败）：
-
div:has(span::after)（含伪元素） -
section:has(:has(p))（嵌套:has，旧版不支持） -
label:has(input[type="checkbox"]:checked) + .desc（:has后接兄弟选择器，语法非法）
替代方案：当 :has() 不可用时怎么模拟“子控父”效果
纯 CSS 无 JS 场景下，唯一可靠方式是把状态“提上来”——利用表单控件（<input type="checkbox">、<select></select>）的 :checked 或 :valid 状态，配合相邻/通用兄弟选择器 + 隐藏控件 + label[for] 关联。
典型结构：
<div class="toggle-wrapper"> <input type="checkbox" id="toggle-1" class="toggle-input"><label for="toggle-1" class="toggle-label">点击切换</label> <div class="toggle-content">内容区</div> </div>
对应 CSS（无需 JS，兼容 IE9+）：
.toggle-wrapper .toggle-content { display: none; }
.toggle-input:checked ~ .toggle-content { display: block; }
关键点：
– input 必须在目标元素之前（才能用 ~ 或 +）
– label 的 for 属性必须精确匹配 input 的 id
– 若需样式联动父容器（如加边框），把 .toggle-input 放在最外层，并让父容器作为其兄弟或祖先
性能与可维护性提醒
:has() 是 CSS 中少数会触发“逆向遍历”的选择器，复杂页面中可能引发重排性能下降，尤其在频繁交互区域（如表格行、列表项）。Chrome DevTools 的 Rendering 面板里开启 “Paint Flashing”，可观察是否因 :has() 导致意外重绘。
建议做法：
– 仅在必要时使用，优先考虑结构调整（如把状态类加到父级）
– 避免在 :has() 中写过于宽泛的选择器（如 :has(*) 或 :has(div div div)）
– 如果项目需支持 Safari 15.3 或更低版本，仍应以 JS 切换 class 为主，:has() 仅作渐进增强
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
