:has() 是当前最直接的解法，它是首个被主流浏览器稳定支持的父元素根据子元素状态反向选择机制，可原生实现数量驱动样式，无需 JS 干预。
为什么 :has() 是当前最直接的解法
浏览器原生支持子元素数量判断的 CSS 方案长期缺失，:has() 是首个被主流浏览器（Chrome 105+、Firefox 119+、Safari 15.4+）稳定支持的「父元素根据子元素状态反向选择」机制。它让 div:has(> .item:nth-child(3)) 这类写法成为可能——不需要 JS 监听 DOM 变化，也不依赖预设类名，真正实现“数量驱动样式”。
注意：IE 完全不支持，且旧版 Safari 对嵌套 :has() 或复杂组合有兼容问题，生产环境需加 @supports (selector(:has(*))) 条件包裹。
:has() 判断子元素数量的常用模式
核心思路是用 :nth-child(n) 或 :nth-last-child(n) 锚定边界位置，再通过 :has() 将该条件“上提”到父容器。常见组合：
-
ul:has(> li:nth-child(3))→ 至少有 3 个li（第 3 个存在即可） -
ul:has(> li:nth-child(3)):not(:has(> li:nth-child(4)))→ 恰好 3 个li -
ul:has(> li:last-child:nth-child(1))→ 只有 1 个li（最后一个也是第一个） -
ul:has(> li:nth-last-child(2):nth-child(n+3))→ ≥3 个且非偶数个？不推荐——逻辑易错，优先用前两种
实际布局中，更推荐用「最小阈值」而非「精确匹配」，比如响应式栅格：3 项以上用 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，否则用 flex 横排。
和 JavaScript 动态 class 的对比取舍
有人会问：用 JS 统计 childElementCount 再加类不是更可控？确实，但代价明确：
- DOM 变动时必须手动触发重算（如
appendChild()后要同步更新 class），漏掉就样式错乱 - 服务端渲染（SSR）场景下，初始 HTML 无 class，首屏样式闪烁
- React/Vue 等框架中，需额外维护 state 或 ref，增加组件复杂度
:has() 是声明式的，浏览器自动响应 DOM 变化。只要结构符合预期（比如不混入注释节点或文本节点），它比 JS 更轻量可靠。但要注意：它无法读取子元素的 computed style 或数据属性，纯靠结构匹配。
容易被忽略的 DOM 结构陷阱
:has() 的选择器必须严格匹配真实子元素。以下情况会导致失效：
- 父容器内有空白文本节点（换行、缩进空格）：
div中写了span实际是:nth-child(2)，因为换行符生成了 text node - 使用了
slot或自定义元素未正确分布内容，影子 DOM 中的元素不可被外部:has()匹配 -
:has(> .item)不匹配.item的子元素，只认直接子级；若需深层匹配，去掉>，但性能略降
调试时可临时加 * { outline: 1px solid red; } 查看真实节点层级，比猜更准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
