配了三年动画，每次加个元素都要回头改 nth-child 的 delay——今天 sibling-index() 把这件事彻底原生化了

写过 CSS 动画的人都知道这个坑：给一组卡片做错位进场的 stagger 效果，要用 nth-child(1)、nth-child(2)、nth-child(3)…… 手动写每一条 delay。一旦产品往列表里塞了一个新卡片，所有序号全乱了，你得回头把整个 CSS 改一遍。这个问题拖了三年，今天 sibling-count() 和 sibling-index() 把这件事从浏览器底层原生化了。

它们能做什么

sibling-count() 返回当前元素所在父容器下的「兄弟节点总数」，sibling-index() 返回当前元素是第几个（从 1 开始）。CSS 终于能自己算出来「我在这一堆里排第几」。

实战：5 行 CSS 替换 9 行 nth-child

九宫格场景，每个卡片宽度均分父容器：

.grid {
  display: flex;
  flex-wrap: wrap;
}
.card {
  width: calc(100% / sibling-count());
  animation: fade-in calc((sibling-index() - 1) * 80ms) both;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

不用改 HTML，不用 JS，删掉一个卡片，动画自动重新排。

浏览器支持：August 2026 达 Baseline

sibling-count() 和 sibling-index() 在 Firefox 154（2026-08-18）发布后，正式成为 Baseline Newly Available。三大引擎全覆盖：

• Chrome 138+（2025-06）
• Safari 26.2+（2025-12）
• Firefox 154+（2026-08）

下一个可以动手的地方

如果你现在还在用 nth-child 硬编码序号，找一个列表动画组件，把 nth-child(n) 的 delay 全换成 sibling-index()。实测一个 8 项列表，CSS 从 11 行缩到 5 行，新加元素时再也不用动样式文件。