by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11804
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、子元素索引值函数sibling-index()

sibling-index()在多个有规律子元素构建的图形或动画效果的场景下非常实用。

我们来看一个《CSS新世界》这本书的一个案例，演示下如何使用sibling-index()函数简化我们的实现。

案例

先看原来的实现，可以访问这个地址：https://demo.cssworld.cn/new/5/4-3.php

所要实现的就是音波播放时候的波形上下运动的效果效果，静态截图效果如下所示：

之前的实现代码如下所示，HTML部分：

<div class="loading">
    <i></i><i></i><i></i><i></i>
</div>

CSS代码：

.loading i {
    display: inline-block;
    border-left: 2px solid deepskyblue;
    height: 2px;
    animation: scaleUp 4s linear infinite alternate;
    margin: 0 1px;
}
.loading i:nth-child(2) {
    animation-delay: -1s;
}
.loading i:nth-child(3) {
    animation-delay: -2s;
}
.loading i:nth-child(4) {
    animation-delay: -3s;
}

@keyframes scaleUp {
    to { transform: scaleY(10); }
}

使用的:nth-child伪类与一个一个匹配，现在有了sibling-index()函数，我们的代码就简单多了。

这样：

.loading i {
  display: inline-block;
  border-left: 2px solid deepskyblue;
  height: 2px;
  animation: scaleUp 1s linear infinite alternate;
  margin: 0 1px;
  animation-delay: calc(-0.25s * sibling-index());
}

@keyframes scaleUp {
    to { transform: scaleY(10); }
}

看，代码是不是简单了很多？

演示

实时渲染效果如下图所示，目前Chrome 138+以上浏览器有效果。

二、子元素数量函数sibling-count()

sibling-count()函数可以返回当前子元素的数量，用在父元素上。

还是通过案例了解这个函数的作用吧。

这里最近我做的一个需求，要求列表数量无论多少，都是两行展示（如下图所示），有了sibling-count()函数，我们就可以精确制定列数，来实现我们想要的效果。

如果是垂直流布局，我们可以使用Grid布局和grid-auto-flow属性（参见“CSS grid-auto-flow深入理解”一文）实现。

假设HTML代码为：

<zxx-grid>
  <zxx-item>格子1</zxx-item>
  <zxx-item>格子2</zxx-item>
  ...
  <zxx-item>格子8</zxx-item>
  <zxx-item>格子9</zxx-item>
</zxx-grid>

则CSS代码如下所示，可以保证永远两行：

zxx-grid {
  display: grid;
  border: solid;
  overflow: auto;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;
}
zxx-item {
  width: 100px;
  outline: 1px dotted;
  padding: .5rem;
}

效果如下图所示：

可若是水平流，无论数量多少，都是两行高度，那么sibling-count()函数就特别实用。

实现代码如下所示：

zxx-grid {
  display: grid;
  border: solid;
  overflow: auto;
  grid-template-columns: repeat(round(up, calc(sibling-count() / 2)), auto);
}
zxx-item {
  width: 100px;
  outline: 1px dotted;
  padding: .5rem;
}

结果……结果实现的效果并不是如预期那样……怪了，这可是按照MDN文档的案例写的呀！

🤔🤔
🤔🤔

后来一研究，才发现，MDN文档提供的例子是错误的！

sibling-count()函数是用在子元素上的，等同于 element.parentElement.children.length。

嗯……那这个函数其实没多少好玩的，估计作用也就是sibling-index()函数相减，计算反向索引值。

或者等宽布局用一用：

ul li {
  width: calc(100% / sibling-count());
}

例如浮动布局永远一行显示：

<ui-flow-root>
  <ui-item></ui-item>
  <ui-item></ui-item>
  <ui-item></ui-item>
  <ui-item></ui-item>
</ui-flow-root>

ui-flow-root {
  display: flow-root;
  ui-item {
    aspect-ratio: 1;
    background: rgb(from deepskyblue r g b / calc(sibling-index() / sibling-count()));
    width: calc(100% / sibling-count());
    float: left;
  }
}

实时渲染效果如下（目前仅Chrome才有效果）:

补充于2026年2月27日

CodePen的这个文字弹动效果就使用了本文介绍的sibling-count()和sibling-index()函数，有兴趣的可以了解下。

三、兼容性、结语

目前这两个函数Chrome 138+支持，如下图所示：

sibling-count()和sibling-index()的值可以使用CSS数学函数计算，如calc()、round()函数等。

还能使用content属性直接明文显示数量值。

例如：

ul li::before {
  content: counter(i) "/" counter(N);
  counter-reset: N sibling-count() i sibling-index() 
}

好吧，毕竟兼容性还不是很好，就不说太多了。

继续宋玉长老，看在宋长老的面子上，欢迎点赞，转发！

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11804

（本篇完）