sibling-count() 函数并不存在于标准 css 中，所有主流浏览器均不支持，css 规范也从未定义；它常被误传为实验提案、js 库方法或对 :nth-child(of) 的误解；纯 css 无法动态获取兄弟数量，可靠方案是用 javascript 获取 children.length 并注入 css 变量。
sibling-count() 函数并不存在于标准 CSS 中。目前（截至 2024 年）所有主流浏览器都不支持该函数，CSS 规范（包括 CSS Selectors Level 4 和 CSS Values Level 4）也从未定义过 sibling-count()。
为什么查不到 sibling-count() 的文档或示例
这不是你环境配置问题，也不是浏览器版本低——它根本没被实现。搜索结果中出现的所谓“sibling-count()”通常源于以下几种情况：
- 混淆了实验性提案（如早年 CSSWG 讨论过的
count()伪类草案，但已被弃用） - 误把 JavaScript 库（如某些 CSS-in-JS 工具）的内部方法当成了原生 CSS 函数
- 将
:nth-child(an+b of S)的匹配逻辑误解为“计数函数”
真正能统计兄弟元素数量的可行方案
纯 CSS 无法动态获取数值并用于计算（比如 width: calc(100% / sibling-count());），但可通过组合现有特性逼近效果：
- 用
:nth-child(n)+:nth-last-child(n)定位“唯一子元素”或“末尾元素”，例如：:nth-child(3):nth-last-child(3)表示父容器恰好有 3 个子元素 - 对已知范围（如最多 6 个兄弟）可写多组规则，配合
display: grid或flex调整列数：.container:has(> :nth-child(4):nth-last-child(4)) { grid-template-columns: repeat(4, 1fr); } - 需要精确数量参与计算时，必须交由 JavaScript：用
element.parentElement.children.length获取总数，再通过style.setProperty()注入 CSS 变量
用 JS 注入 CSS 变量实现“伪 sibling-count”
这是当前最可靠、可维护的动态布局方案：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
// HTML: <div class="grid-container">
<div>A</div>
<div>B</div>
</div>
const container = document.querySelector('.grid-container');
const count = container.children.length;
container.style.setProperty('--sibling-count', count);
CSS 中即可使用：
.grid-container {
--sibling-count: 1; /* fallback */
grid-template-columns: repeat(var(--sibling-count), 1fr);
}
注意：children.length 只计**元素节点**，不包含文本节点或注释，这点和 childNodes.length 不同。
真正的难点不在“怎么写”，而在于何时重新计算——DOM 动态增删子元素后，必须手动触发更新，否则 CSS 变量不会自动同步。这个响应式链条得自己补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
