配了八年 nth-child，每次数到第几个都要靠手算——今天 sibling-count() 把这件事从根上修了

CSS 终于肯告诉你「这个元素是兄弟里的老几」了。

做组件化布局的工程师都有一个共同噩梦：同一个组件渲染了 N 个子元素，第 N 个要靠 right: 0 贴边，最后一个要特殊处理，第一和最后样式还要分开写。以前唯一的办法是 nth-child(N)、nth-last-child(N) 一路手算——改一次结构全得回头改一遍。

这个局面被两条刚进 Baseline 的 CSS 函数彻底翻了篇。

sibling-count()：你是第几个里的第几个

这个函数返回当前元素在父容器里的兄弟总数。

不用数有几个卡片，不用每次增删都回头改 CSS。浏览器自己知道。

sibling-index()：你就是第 N 个

这个函数返回元素在兄弟里的位置，从 1 开始算。

以前给列表第一项和最后一项加特殊样式，经典做法是 first-child / last-child 再加 nth-child。sibling-index() 直接把位置给你，calc() 里随便用，随你怎么算。

一个真实场景：自适应网格间距

新来的设计师说「卡片数量不固定，但每个间距要一样，最后一排左对齐」。用 CSS Grid 配合 sibling-count()：

浏览器支持情况（2026 年 8 月）

sibling-count() 和 sibling-index() 在 2026 年 8 月 18 日进入 Baseline，即 Firefox 154 完成了三大引擎的最后一块拼图。

• Chrome 138+（2025 年 6 月）
• Safari 26.2+（2025 年 12 月）
• Firefox 154+（2026 年 8 月 18 日）

全球覆盖率约 85-90%，国内 Chrome + Safari 用户基本全覆盖。

不支持的浏览器里，CSS 照常解析，这些函数直接不生效——加个 @supports 渐进增强就行：

下一步

如果你现在在写 nth-child(N) 这种硬编码，改成 sibling-index() 就能动态起来。如果你在维护一个多状态徽章系统，把手动编号换成 calc() 组合，这几个函数够用。查一下 caniuse.com 确认目标用户的浏览器版本，然后直接用——不需要任何 polyfill，也不需要构建步骤。