:has() 只能判断“是否存在第N个子元素”，不能直接计数；正确写法是 :has(*:nth-child(4)) 或 :has(> :nth-child(4))，而非 :has(:nth-child(4))。
:has() 不能直接数出“几个”，但能可靠判断“有没有第 N 个子元素”——这是唯一可落地的纯 CSS 数量响应方式。
为什么 :has(:nth-child(4)) 总是不生效
因为 :has(:nth-child(4)) 实际匹配的是“自身是第 4 个子元素的父容器”，这在逻辑上不可能成立。真正要检测“是否存在第 4 个子元素”，必须用 :has(*:nth-child(4))（注意 * 和空格）。浏览器会把 :nth-child(4) 当作对当前选择器元素自身的约束，而不是对后代的探测。
- 正确写法：
.grid:has(*:nth-child(4))→ 表示“.grid 下存在第 4 个子元素” - 错误写法：
.grid:has(:nth-child(4))→ 浏览器尝试找“.grid”自己是不是第 4 个子，永远失败 - 更稳妥的替代：
.grid:has(> :nth-child(4))（限定为直接子元素，避免深层干扰）
实现“1–3 个子项 → 1 列，4–6 个 → 2 列，7+ 个 → 3 列”的规则顺序
CSS 没有 > 或 < 运算符，只能靠“存在性 + 否定”逼近范围。关键不是写对单条规则，而是叠加顺序必须从大到小，否则低优先级会覆盖高优先级：
.grid:has(> *:nth-child(7)) { grid-template-columns: repeat(3, 1fr); }.grid:has(> *:nth-child(4)):not(:has(> *:nth-child(7))) { grid-template-columns: repeat(2, 1fr); }.grid:not(:has(> *:nth-child(4))) { grid-template-columns: 1fr; }
漏掉中间的 :not()，4–6 个和 7+ 个都会命中第一条规则；:not() 必须后置，且不能嵌套在其他伪类里（Safari 不支持 :not(:has())）。
立即学习“前端免费学习笔记（深入）”；
想精确匹配“恰好 5 个子元素”怎么办
用 :has(> *:nth-child(5):nth-last-child(5))。它要求同一个元素既是正数第 5 个，又是倒数第 5 个，即总数恰好为 5。
- 前提：所有子元素必须是同级块级元素（如
<div>），不能混入文本节点、注释或换行空白 —— 它们会被:nth-last-child()计入，导致错位 - 若 DOM 中有空格/换行，要么用
display: contents把父容器的文本节点“压平”，要么改用 JS 注入data-count="5"后匹配[data-count="5"] - Safari 16.4+ 和 Chrome 105+ 支持该写法，Firefox 121+ 才稳定；旧版浏览器会静默忽略整条规则
:has() 在动态渲染中容易失效的三个实际原因
React/Vue/Angular 场景下样式滞后、不触发、或只生效一次，往往不是代码写错了，而是底层机制限制：
- DOM 渲染完成前，
:has()已完成快照计算 —— 如果子元素是useEffect或mounted后才 append，样式不会自动重算 - Safari 对
:has()的重排触发极保守，增删子元素后可能需手动el.offsetHeight强制重绘 - 服务端渲染（SSR）时，
:has()完全不生效（无 DOM 环境），且无法 fallback —— 必须搭配@supports not selector(:has())提供备用方案
真正难的不是写出 :has(*:nth-child(3))，而是意识到它是一次性结构快照，不是实时监听器；一旦项目需要兼容 Safari 15.x 或旧版 Firefox，就得准备 JS 注入 class 的兜底路径。
