:has()是已稳定支持的CSS伪类，用于根据子元素存在性为父元素设样式；它支持后代、子代、兄弟等关系符，可嵌套但不可用于*或伪元素，且不触发重排。
:has() 现在能直接在 CSS 中用，无需 JS 就能根据子元素是否存在、是否匹配某条件，来给父元素加样式。它不是“未来功能”，而是已在 Chrome 105+、Edge 105+、Safari 15.4+、Firefox 121+（默认启用）中稳定可用。
为什么 :has() 能解决“父选择器缺失”这个老问题
过去只能靠 JS 监听子元素变化再手动加类，或者强行在 HTML 里塞一堆状态类（比如 class="container has-image has-title"）。:has() 把这个逻辑交还给 CSS 引擎：浏览器自己判断“这个 div 里面有没有 .error？有没有 :invalid 输入框？有没有第七个子项？”——匹配了就应用样式，不匹配就不应用，完全响应式。
关键点在于：:has() 是存在性检测，不是实时监听；它只关心当前 DOM 结构是否满足条件，不关心变化过程。
- ✅ 支持后代、子代（
>）、紧邻兄弟（+）、通用兄弟（~）等关系符 - ✅ 可嵌套使用（如
section:has(h1):has(p)表示同时含h1和p） - ❌ 不能用在
*或伪元素（如::before）上 - ❌ 不支持动画关键帧或
@keyframes内部
:has() 常见写法与易错括号空格问题
W3C 验证器（如 https://validator.w3.org/nu/）目前对 :has(.cls) 这种紧凑写法会报 Parse Error，但这是验证器解析器滞后，不是你的代码错。所有现代浏览器都能正确解析并渲染。
真正有效的绕过方式，是加一个空格：:has( .cls) ——注意括号后、点号前那个空格。
- ✅ 推荐统一写成
:has( .error)、:has( > button.primary)、:has( + img) - ⚠️ 避免混用：
:has(.a, .b)→ 改为:has( .a, .b)，逗号前后也保持空格 - ⚠️ 不要误写成
:has(>.cls)，除非你明确需要“直接子元素”语义；多数场景用空格版更安全 - ? 别试图用
:has()匹配动态插入的元素后再触发 JS 动画——它不触发重排，也不提供事件，只是样式开关
真实项目中高频使用的三个场景
别只盯着“选中父容器”这个抽象概念，直接看怎么落地：
-
表单校验反馈：
.form-group:has(input:invalid) { border-color: #e53e3e; }——只要任意 input 失焦后无效，整个组就标红 -
内容驱动布局切换：
.card-grid:has(.card:nth-child(5)) { grid-template-columns: repeat(3, 1fr); }——卡片数 ≥5 时自动从 2 列变 3 列 -
悬停增强逻辑：
.nav-item:not(:has(.submenu)) { padding-right: 1rem; }——没下拉菜单的导航项才加右边距，避免多余空白
注意：:has() 在 :not() 内部可用，但反过来不行（:not(:has(...)) 合法，:has(:not(...)) 不合法）。
Firefox 中 querySelectorAll() 报错怎么办
Firefox 121+ 已在样式表中支持 :has()，但 DOM API（如 document.querySelectorAll("div:has(p)")）仍会抛出 DOMException: "div:has(p) is not a valid selector"。这不是 bug，是标准推进节奏差异。
生产环境推荐用官方维护的 polyfill：polyfill-pseudoclass-has，引入后原生 API 即刻生效：
<script src="https://unpkg.com/polyfill-pseudoclass-has@1.2.3/dist/polyfill.umd.js" onload="window['polyfill-pseudoclass-has'].addToBrowser();"></script>
- ✅ 加载后，
querySelector、querySelectorAll、matches()全部支持:has() - ⚠️ 不要搭配自定义实现混用，否则可能重复绑定或冲突
- ⚠️ 如果页面节点极多（如 >5000 个），polyfill 会有轻微性能开销；轻量场景可手写过滤函数替代
最常被忽略的一点：:has() 的匹配结果不会触发 CSSOM 重计算，也就是说，它不参与级联优先级博弈——它只是让规则“生效”或“不生效”，而不是把父元素变成更高权重的目标。所以别指望靠它覆盖 !important 或内联样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
