你以为 CSS 只能靠眼睛盯着 nth-child 猜序号？今天 sibling-count() 把这件事彻底原生化了

写过前端的都踩过这个坑——卡片动画 stagger 要手写 JS、多人协作的列表每次加减项都要改一堆 :nth-child 规则。以前只有两条路：要么写一段 forEach 遍历注 custom property，要么用 Sass 循环硬编码一个固定数量。CSS 其实早就知道每个元素在哪个位置、它有多少兄弟姐妹，只是从来没把这些信息暴露出来让我们直接用——直到现在。

Firefox 154 上个月稳定发布以后，sibling-count() 和 sibling-index() 正式进入 Baseline 2026 覆盖范围：Chrome 138+、Safari 26.2+、Firefox 154+，三大引擎全部支持。这意味着从今天起，上面说的这些场景，CSS 一行就能搞定，完全不需要 JS。

来看两个最典型的例子。先说 stagger 动画：以前每张卡要单独写一条 animation-delay 规则，加一张卡就要补一条。

/* 旧方式：每张卡都要写一条规则，加卡就改 CSS */
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 120ms; }
.card:nth-child(3) { animation-delay: 240ms; }
/* ... */

现在只需要一行：

/* 新方式：浏览器自动知道自己在第几个 */
.card {
  animation: card-in 400ms ease both;
  animation-delay: calc((sibling-index() - 1) * 120ms);
}

sibling-index() 返回的是 1 起始的位置，所以要减 1 才能让第一张卡从 0ms 开始。这个公式套到 exit 动画上也成立，只需要把公式倒过来：

.card {
  animation: card-out 300ms ease both;
  animation-delay: calc((sibling-count() - sibling-index()) * 80ms);
}

这样最后一张卡最先离开，第一张最后离开，前后完全对称，什么都不用改。

再一个：等分宽度的 flex 布局。以前要算百分比，或者用 nth-child 规则，都不灵活。现在：

.segment {
  width: calc(100% / sibling-count());
}

不管父元素里有 3 个还是 10 个子元素，每段的宽度自动平分。动态加减项时不需要动一行 CSS，浏览器自己会重新算。

第三个例子是把序号渲染成列表编号：

li::before {
  content: sibling-index();
}

配合 sibling-count() 还能做一个 “Step X of Y” 的进度标签：

li::after {
  content: " / " sibling-count();
}

结果：1 / 3、2 / 3、3 / 3，完全由 CSS 驱动，无 JS。

这两个函数返回的是整数，可以直接塞进 calc() 做运算，也能和 CSS 三角函数组合做径向布局。可以说是继 CSS Grid 之后，CSS 在”知道自己在哪里”这件事上最大的一次进步。

sibling-count() 和 sibling-index() 都是 CSS Values and Units Module Level 5 的一部分，MDN 文档已经完整上线。各浏览器支持情况：Chrome 138+、Edge 138+、Firefox 154+（2026 年 8 月 18 日稳定版）、Safari 26.2+，全球覆盖率已经超过 90%，可以直接在生产环境用。如果要兼容更老的浏览器，可以用 @supports 做渐进增强。

下一次你再遇到”需要知道这是第几个”或者”有几个兄弟姐妹”的场景，先看看 CSS 能不能回答这个问题——大概率可以。