:has()是现代CSS中唯一原生支持根据子元素反选父元素的结构伪类，语法为父选择器:has(子选择器)，如div:has(p)；需注意浏览器兼容性、性能影响及子选择器写法陷阱。
如何用 :has() 选择包含特定子元素的父节点
现代 CSS 中，:has() 是唯一原生支持「根据子元素反选父元素」的结构伪类。它解决了长期依赖 JavaScript 才能完成的“父选择器”需求，但要注意浏览器兼容性与使用限制。
-
:has()必须写在父选择器之后，语法为父选择器:has(子选择器)，例如div:has(p)匹配至少有一个<p>子元素的<div> - 不支持在
@keyframes或属性选择器中嵌套使用；也不能用于document.querySelector()（JS 不识别:has()） - 目前主流浏览器中，Chrome 105+、Safari 15.4+、Firefox 121+ 支持；Edge 同 Chrome 版本。旧版 Safari 和部分移动端 WebView 仍不支持
- 性能上，
:has()可能触发重排，尤其当内部选择器复杂或匹配范围广时，建议限定层级，如用article:has(> h2)而非*:has(h2)
:has() 中子选择器写法的常见陷阱
子选择器写法直接影响匹配结果，容易因空格、关系符或伪类位置出错。
- 空格表示后代，
ul:has(li a)匹配包含任意层级<a>的<ul>；而ul:has(> li > a)要求<a>是<li>的直接子元素，且<li>是<ul>的直接子元素 - 不能把伪类写在
:has()外部再组合，例如div:has(p):hover是合法的，但div:hover:has(p)会失效（部分浏览器不支持伪类顺序颠倒） -
:has(:empty)无法匹配「有空白文本节点」的元素（如含换行或空格），因为:empty要求完全无子节点（包括文本节点）；此时可用:has(*):not(:has(* + *))等变通方式，但更推荐 JS 判断
替代方案：当 :has() 不可用时怎么办
在不支持 :has() 的环境（如微信内置浏览器、旧版 iOS Safari），需回退到其他手段。
- 服务端或构建时添加 class：例如后端判断是否有子元素，输出
<div class="has-aside">...</div>，再用div.has-aside控制样式 - CSS 自定义属性配合 JS：用 JS 检测
element.querySelector('footer')是否存在，存在则设置element.style.setProperty('--has-footer', '1')，CSS 中写section:has([style*="--has-footer:1"]) {...}（不优雅但可行） - 避免反向选择：重构 HTML 结构，让状态类由父级主动控制（如用
<article class="with-comments">），而非靠子元素推断
:has() 与兄弟/后续兄弟选择器的联动场景
:has() 常和 +、~ 组合，实现“某元素存在 → 影响其后的兄弟”的逻辑。
立即学习“前端免费学习笔记（深入）”；
-
form:has(:invalid) + .error-message：当表单内任一控件校验失败，显示紧邻的错误提示 -
details:has(summary:focus) ~ .panel：点击<summary>时，影响后续兄弟.panel的样式（注意details默认不触发:focus，需加tabindex） - 慎用
~配合复杂:has()：例如section:has(h2) ~ section:has(h3)易受 DOM 顺序干扰，且可读性差，建议拆分为独立规则或改用 JS
实际项目中，:has() 最实用的不是“选父”，而是「基于内容存在性做样式开关」——比如只在有图片时启用图注样式、有视频时显示播放按钮图标。它的价值不在覆盖所有场景，而在让一部分原本必须 JS 的逻辑回归 CSS。兼容性仍是硬门槛，上线前务必检查目标环境是否支持。
