:has() 选父元素常不生效因浏览器支持有限（Chrome 105+/Safari 15.4+/Firefox 103+）且语法受限，仅能置于选择器开头，不可嵌套或用于非后代关系；需确保子元素确为父元素的后代，并注意性能、SSR 和可访问性问题。
为什么直接用 :has() 选父元素经常不生效
因为浏览器支持度和选择器结构限制。Chrome 105+、Safari 15.4+、Firefox 103+ 才原生支持 :has()，且它不能出现在选择器开头以外的任何位置——也就是说，div:has(input:checked) > label 是非法的（伪类不能跟在关系符后面）。合法写法只能是 div:has(input:checked) 这种「容器自身满足条件」的形式。
常见错误现象：label:has(input:focus) 看起来合理，但实际无效——因为 label 通常不包裹 input，而是通过 for 属性关联；此时 input 并非其子元素，:has() 判定失败。
- 确保目标子元素确实是父元素的**后代**（含直接子元素），不是兄弟或跨层级节点
- 避免在 CSS-in-JS 或旧版构建工具中使用，它们可能提前剥离不识别的选择器
- 不要嵌套
:has()，如:has(:has(...))，目前所有浏览器都不支持
:has() 中怎么准确匹配「被选中的复选框」父容器
典型场景：一组 div.card，里面有个 input[type="checkbox"]，想让整个卡片在勾选后变色。关键点在于选择器必须从父容器出发，且子元素选择要精确。
div.card:has(input[type="checkbox"]:checked) {
border-color: #007aff;
background-color: #f0f8ff;
}
注意这里没有空格在 :has() 内部——input[type="checkbox"]:checked 是一个连续选择器，表示“存在一个同时满足 type 和 checked 的 input”。如果写成 input:checked，可能误命中其他类型表单控件；加上属性限定更安全。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
[type="checkbox"]显式限定，避免和radio或普通input混淆 - 不要写
:has(> input:checked)，除非你确定input一定是直接子元素；多数情况用空格（后代）更鲁棒 - 若 checkbox 被包裹在
span或label里，仍能匹配——:has()查的是后代，不是直系子元素
用 :has() 响应 input 的聚焦状态时要注意什么
聚焦状态（:focus）是瞬态的，且依赖 DOM 结构。最常踩的坑是把 label 当作父容器去监听 input:focus，但实际 HTML 中二者常是平级关系：
<label for="name">姓名</label> <input id="name" type="text">
这种结构下，label:has(input:focus) 完全无效，因为 input 不在 label 内部。正确做法是把 input 包进 label，或换用包裹容器：
<div class="field"> <label>姓名</label> <input type="text"> </div>
然后写：div.field:has(input:focus)
- 聚焦状态不会冒泡，
:has()只能捕获当前时刻有焦点的元素是否存在于后代中 - 移动端软键盘弹出时，
:focus可能延迟触发或短暂丢失，视觉反馈可能闪烁 - 如果 input 被
display: none或visibility: hidden，它无法获得焦点，:has()条件永不满足
性能和可访问性上容易被忽略的细节
:has() 是 CSS 中少数会触发「回溯计算」的选择器——浏览器必须对每个候选父元素检查其后代，复杂 DOM 下可能引发重排或卡顿。更隐蔽的问题是：它完全绕过语义和 ARIA，纯靠结构匹配。
- 不要用
:has()替代aria-invalid或aria-required的逻辑反馈；屏幕阅读器看不到 CSS 状态变化 - 避免在长列表（如 100+ 项）的每一项上都用
:has(input:invalid)，考虑用 JS 监听 + 添加 class 更可控 - SSR（服务端渲染）时，
:has()不生效，首屏样式可能和客户端不一致——需要 fallback 样式或 JS 补充
真正难的不是写对语法，而是判断这个交互是否真该由 CSS 驱动。比如表单校验高亮，用户输入过程中频繁触发 :has() 计算，不如用 input.addEventListener('input', ...) 控制 class 更稳。
