sibling-count()

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

sibling-count() CSS 函数返回一个整数，表示使用该函数的元素的同级 DOM 元素的总数（父元素的直接子元素），包括自身。

注意： counter() 函数提供类似的结果，但它返回一个 <string>（更适合生成内容），而 sibling-count() 返回一个 <integer>（可用于计算）。

语法

css

sibling-count()

参数

sibling-count() 函数不接受参数。

返回值

一个整数；包括元素本身在内的同级 DOM 元素的总数。

示例

动态列计数

此示例演示如何根据列表中的项目数量设置列表中每个项目的宽度，从而使每个子项位于自己的列中。

HTML

我们包含一个 <ul> 容器和几个 <li> 子元素。

html

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

我们将每个列表项的 width 除以列表包含的直接子元素数量。我们还将每个奇数元素设置为具有 background-color，以更好地演示最终效果。

css

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
  display: flex;
}

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

li:nth-of-type(odd) {
  background-color: rgb(0 0 0 / 0.05);
}

结果

规范

规范
CSS 值和单位模块 Level 5 # funcdef-sibling-count

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者在 2025 年 10 月 11 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题