:has() 必须位于选择器最左侧且仅支持原生状态变更，如 .card:has(input[type="checkbox"]:checked)；不支持伪类链式调用、嵌套或 Shadow DOM 内部匹配，Chromium 105+/Firefox 121+/Safari 15.4+ 可用。
为什么直接写 .parent:has(.child:checked) 不生效
浏览器对 :has() 的支持有明确限制：它不能出现在选择器列表的开头以外的位置，也不能嵌套使用。更关键的是，:has() 在 CSS 中**不支持伪类链式调用**——比如 .parent:has(.child:checked):hover 是非法的，整个规则会被浏览器忽略。常见错误是把它当 JavaScript 事件那样层层叠加状态，结果样式完全不应用。
实际生效的前提只有两个：父元素必须是静态可选中的块级容器（如 div、section），且子元素状态变更必须是原生可触发的（如 input[type=checkbox] 的 :checked、a:hover、img:loaded 等）。
-
:has()目前仅在 Chromium 105+、Firefox 121+ 和 Safari 15.4+ 中可用，旧版 Safari（尤其 iOS 15.6 之前）会静默丢弃整条规则 - 不能用于
@keyframes或媒体查询内部 - 若子元素是通过 JS 动态插入的，且未触发重排，部分浏览器可能无法及时响应状态变化
怎么让 :has() 正确匹配表单控件状态
最稳定、兼容性最好的写法是把 :has() 放在选择器最左侧，并紧贴父容器标签或类名，子选择器只用一层直接子代或简单后代即可。复杂嵌套（如 .parent:has(.group > .item:first-child.active)）容易因渲染时机或 DOM 结构微小差异而失效。
例如控制一个卡片在内部复选框被勾选时整体变色：
立即学习“前端免费学习笔记（深入）”；
.card:has(input[type="checkbox"]:checked) {
border-color: #007aff;
background-color: #f0f9ff;
}
- 确保
input是.card的**后代**（非必须直系子元素），否则匹配失败 - 避免写成
.card:has(label > input:checked)—— 若label是动态渲染或含空格节点，可能中断匹配 - 如果需要响应多个子状态（如任一 radio 选中），用逗号分隔：
.card:has(input[type=radio]:checked), .card:has(input[type=checkbox]:checked)
用 :has() 替代 JS 切换 class 的边界在哪
:has() 本质是 CSS 运行时匹配，不是事件监听。它只对**浏览器原生触发的状态变更**有效，比如用户点击、键盘焦点、图片加载完成。它无法响应 JS 手动设置的 element.checked = true，除非该操作同时触发了 DOM 重排或 input 元素真正获得了 :checked 伪类（多数现代浏览器能做到，但需测试）。
- JS 修改
input.checked后，Chrome 通常能立刻触发:has()匹配；Firefox 需要随后一次重排（如修改offsetHeight）才更新 - 绝对不要依赖
:has()实现核心交互逻辑（如表单提交校验），它只是视觉反馈的补充手段 - 若子元素状态由 Web Component 内部管理（如
<my-checkbox>），需确保其内部input暴露且未被 Shadow DOM 隔离
遇到样式不更新？先查这三件事
大多数“写了没反应”问题其实和语法无关，而是环境或结构隐性不满足条件。
- 打开 DevTools → Elements 面板，右键父元素 → “Force state” → 勾选
:has看是否临时生效（Chrome Canary 支持此调试功能） - 检查子元素是否被
display: none、visibility: hidden或opacity: 0遮盖——:has()仍能匹配，但视觉上无变化 - 确认父元素没有设置
contain: layout style—— 某些 contain 值会阻止:has()向内检测子状态
真正麻烦的是跨 Shadow DOM 场景：父容器在 light DOM，子控件封装在自定义元素 shadow root 里，此时 :has() 完全不可见子元素。这种情况下，只能靠 JS 向外暴露状态，再手动加 class。
