:has(*:nth-child(3))更可靠，因为它检测“是否存在第3个子元素”，而:has(:nth-child(3))错误要求目标自身是第3个子元素；后者在容器选择器上必然失效。
用 :has() 判断子元素个数时，为什么 :has(*:nth-child(3)) 比 :has(:nth-child(3)) 更可靠
因为 :nth-child(3) 要求目标元素**自身是第3个子元素**，而你想检测的是“有没有第3个子元素”，不管它是不是当前选择器匹配的元素。用 *:nth-child(3) 才表示“任意元素作为第3个子元素存在”，这才是真正的“数量判断”。
常见错误是写成 .container:has(:nth-child(3))，结果发现 3 个子项时没生效——那是因为你选中的是 .container，它不可能是自己的第3个子元素。
实操建议：
- 检测“至少有3个子项”：用
.container:has(*:nth-child(3)) - 检测“恰好2个子项”：得组合否定，比如
.container:has(*:nth-child(2)):not(:has(*:nth-child(3))) - 检测“只有1个子项”：用
.container:has(*:nth-child(1)):not(:has(*:nth-child(2)))
Grid 布局里用 :has() 动态切列数，但 Safari 不支持怎么办
:has() 在 Safari 16.4+ 才开始支持，且仅限于 display: grid 或 flex 容器内部分场景；旧版 Safari 和部分 iOS WebKit 直接忽略整个规则，不报错也不生效。
立即学习“前端免费学习笔记（深入）”；
这不是“加个前缀”能解决的问题，而是底层不识别语法。如果你必须兼容 Safari 15.x 或更早，:has() 方案就得放弃。
替代思路（不依赖 JS）：
- 用
minmax()+auto-fit配合grid-template-columns做流式列数控制，虽然不能精确按数量分支，但视觉效果常够用 - 对关键分支（如 1/2/3 子项），预设三套 class（
.count-1、.count-2、.count-3），由 JS 注入——这是目前最稳的落地方式 - 避免在伪类里嵌套太深，例如
:has(> div > span:nth-child(2))在部分浏览器中解析失败率明显升高
用 :has() 实现“子项超过5个就隐藏溢出”，但滚动失效了
典型写法是 .list:has(*:nth-child(6)) { max-height: 300px; overflow-y: auto; }，看起来合理，但实际滚动条可能不出现或无法拖动——根本原因是 :has() 触发的样式变更，若影响了父容器的盒模型计算（比如从 height: auto 变成 max-height），某些浏览器会跳过重绘滚动上下文。
更稳妥的做法：
- 给容器始终设
overflow-y: auto，只用:has()控制max-height和height的切换，避免从无到有地激活 overflow - 慎用
:has()同时改display（如display: none→display: grid），这会导致整个子树重排，滚动锚点丢失 - 如果内容动态增删，记得在 JS 插入节点后触发一次
getComputedStyle(el).height强制重排，否则:has()可能延迟一帧才响应
为什么 :has() 不能写在媒体查询里做双重条件判断
像 @media (min-width: 768px) { .card:has(.badge) { ... } } 这种写法，Chrome 和 Firefox 支持，但 Safari 17.0 之前完全不认——它把 :has() 当作无效选择器直接丢弃，连带整个规则块都不加载。
这不是 bug，是规范执行差异：:has() 属于“相对选择器”，部分引擎要求它必须出现在顶层选择器链中，不能被嵌套在 @media、@supports 等上下文里。
绕过方法：
- 把媒体查询逻辑前置，例如用
.md\:has(.badge)配合 Tailwind 的变体（需开启has插件） - 用
@supports selector(:has(*))先做能力检测，再包裹媒体查询，但注意 Safari 对@supports selector()的支持也晚于:has()本体 - 真正需要“响应式 + 数量判断”的场景，优先考虑用 JS 监听
resize和MutationObserver组合打标，CSS 只负责样式分支
最易被忽略的一点：伪类里的子选择器层级越深，浏览器回溯成本越高，:has(div > p > span) 在长列表中可能引发明显卡顿，简单结构尽量压平到一层。
