:has() 能替代部分容器查询需求，因其通过子元素状态（如:checked、:not(:empty)）反向影响父级样式，无需修改html结构或设置container-type，适用于第三方组件等受限场景。
为什么 :has() 能替代部分容器查询需求
因为原生 @container 查询需要显式设置 container-type，而很多场景下你根本没法改 HTML 结构（比如第三方组件、CMS 输出、iframe 内容），也没法加 wrapper 元素。这时候 :has() 提供了一种“反向推导”能力：不查容器尺寸，而是通过子元素是否满足某状态（如 :checked、:focus、:empty、[data-active]），来影响父级样式——效果上等价于“容器响应子状态”。
:has() 实现折叠面板展开时撑开父容器的样式
常见错误是试图用 :has(.panel:active) 去控制外层 .accordion 的 padding 或 border，但 :active 是瞬态伪类，无法触发持续样式；更可靠的是绑定在可持久化的状态上，比如 input[type="checkbox"] 的 :checked 或自定义 data- 属性。
- 用
<input type="checkbox" id="p1">配合label[for="p1"]控制显隐，再用.accordion:has(#p1:checked)选中整个面板容器 - 避免写成
.accordion:has(.panel.open)—— 因为.open是 JS 添加的 class，浏览器目前（Chrome 125+、Safari 16.4+、Firefox 126+）对:has(.class)的支持已稳定，但若该 class 是动态插入的，需确保 DOM 更新后样式引擎能及时重算（多数情况没问题） - 注意层级：
:has()只能向上选中**祖先元素**，不能跨兄弟或父级的父级；例如.item:has(+ .trigger)是非法的（+是兄弟选择器，:has()内部只接受后代/子代关系）
.accordion {
border: 1px solid #ddd;
margin-bottom: 8px;
}
.accordion:has(#p1:checked) {
border-color: #007bff;
background: #f8f9fa;
}
用 :has() 模拟“内容为空时隐藏容器”
这比 JS 监听 childList MutationObserver 简洁得多，也比 :empty 更灵活——因为 :empty 会把空白符、注释都视为非空，而 :has() 可配合伪元素或占位元素做判断。
- 推荐模式：
.card:has(.card-content:not(:empty))—— 显式检查内容区是否有非空文本节点或子元素 - 不要用
.card:has(.card-content *)，它会在有子元素时匹配，但子元素可能是空<div></div>，导致误判 - 如果内容区含
<img>或<svg></svg>，它们默认是“非空”的，所以:has(img)也能用，但语义不如:not(:empty)清晰 - 兼容性注意：Firefox 直到 126 才支持
:has()中嵌套伪类（如:not(:empty)），旧版本需降级为:has(.card-content > *)
性能与限制：别把它当万能容器查询
:has() 不是 CSS 容器查询的平替，它没有尺寸感知能力，也不能响应 viewport 或 container 尺寸变化。它的核心价值是“状态驱动布局”，而非“尺寸驱动布局”。真正容易被忽略的一点是：复杂 :has() 选择器（尤其是嵌套多层或含属性选择器）可能触发强制同步样式计算，在长列表或频繁更新的 UI 中造成卡顿。
- 避免
:has(div > span > a[href^="https"]) + .meta这类深层嵌套，尽量扁平化结构并用语义 class 控制 - 不要在
:has()中使用:nth-child()或:first-of-type等结构伪类——它们在:has()内部的支持度极低，且行为不可靠 - 如果目标是响应“容器宽度 @container；
:has()此时完全无能为力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
