:has() 无法直接计数，但可通过组合伪类判断子元素数量：如 :has(:nth-child(3)) 表示至少3个子元素，:has(> :first-child:last-child) 表示恰好1个，:not(:has(> )) 表示无子元素。
用 :has() 判断子元素个数并控制父元素样式
直接说结论：:has() 本身不能直接写 :has(:nth-child(3)) 这类“计数”逻辑，但可以通过组合伪类间接实现对子项数量的条件判断——比如「至少有 3 个子元素」「恰好 1 个子元素」「没有子元素」等常见场景。
:has() + :nth-child() 的实际可用组合
浏览器（Chrome 105+、Safari 15.4+、Firefox 121+）支持 :has()，但要注意它不接受所有伪类；:nth-child(n) 是被允许的，而 :nth-of-type(n) 也行，但 :nth-last-child() 在部分版本中兼容性较差，慎用。
常见有效写法：
-
:has(*:nth-child(3))→ 父元素「至少有 3 个子元素」（推荐，兼容性好） -
:has(> :first-child:last-child)→ 父元素「恰好 1 个子元素」（注意要加>避免匹配后代） -
:not(:has(> *))→ 父元素「没有子元素」（即空容器） -
:has(> :nth-child(2), > :nth-child(3))→ 至少 2 个（比:nth-child(2)更稳妥，防伪元素干扰）
容易踩的坑：选择器顺序和作用域限制
:has() 是父选择器，但它只向上找**最近的匹配祖先**，且不能跨 Shadow DOM。更重要的是：它不支持在 @media 或 @supports 内部作为条件使用，也不能用于 JS 的 querySelector（目前仅 CSS 引擎支持）。
典型错误：
- 写成
div:has(span):hover却期望 hover 效果触发时才计算:has—— 实际上:has是静态计算的，与交互无关 - 用
:has(span:nth-of-type(2))但子元素类型混杂（比如div和span交替），导致误判 - 忽略空格：写
:has(>span)（无空格）会匹配子元素为<span></span>的父级，但:has(> span)（有空格）才是正确语法
性能与回流注意事项
:has() 在复杂 DOM 中可能引发重算开销，尤其当父元素层级深、子元素频繁增删时。浏览器需对每个候选父元素遍历其子树，所以不建议在高频更新区域（如列表滚动容器）大量使用。
优化建议：
- 限定选择器范围，比如用类名前缀：
.list:has(> li:nth-child(4))而非泛泛的div:has(...) - 避免嵌套
:has()（如:has(:has(...))），目前所有浏览器都不支持 - 服务端渲染或 JS 控制数量时，优先考虑添加 class（如
data-count="3"），CSS 只做兜底
真正需要靠数量驱动样式的场景其实不多，多数时候是布局断点或状态反馈——别为了炫技硬套 :has()，class 控制更稳定、可读性更强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
