sibling-index() 函数不存在于标准 css 中，截至 2024 年所有主流浏览器均不支持；它是对预处理器函数、js 库扩展或废弃提案的误称，css 本身无法运行时获取兄弟元素序号。
sibling-index() 函数并不存在于标准 CSS 中。目前（截至 2024 年）的 CSS 规范里没有 sibling-index() 这个函数，所有主流浏览器都不支持它。如果你在某个文档、插件或实验性草案里看到这个名字，很可能是混淆了其他技术（比如某些 CSS 预处理器的自定义函数、JavaScript 库的伪类扩展，或已被废弃/未落地的提案）。
为什么查不到 sibling-index() 的文档或效果
CSS 原生不提供获取元素序号的运行时函数。CSS 是声明式、无状态的，无法像 JavaScript 那样遍历 DOM 并计算索引。所谓“兄弟序号”属于动态结构信息，必须由 JS 获取或通过预设的伪类间接表达：
-
:nth-child(n)和:nth-of-type(n)是匹配器，不是取值器——它们能选中第 n 个孩子，但不能把“n”作为值返回给content或counter-increment - CSS 自定义属性（
--index）无法自动从 DOM 结构推导，必须手动设置或用 JS 注入 - 部分构建工具（如 PostCSS 插件）可能模拟类似行为，但生成的是静态规则，不是运行时计算
替代方案：用 :nth-child() 实现“按位置应用样式”
如果你的真实需求是“给第 1 个、第 3 个、第 5 个兄弟元素加不同背景”，直接用 :nth-child() 即可，无需序号值本身：
div.parent > p:nth-child(1) { background: #fee; }
div.parent > p:nth-child(3) { background: #efe; }
div.parent > p:nth-child(5) { background: #eef; }
注意：:nth-child() 计算的是所有同级子元素（不管标签名），而 :nth-of-type() 只计同类型标签。选哪个取决于你的 HTML 是否混排标签。
真需要显示序号？用 counter-increment + counter()
如果目标是在内容里显示“1. 标题”“2. 标题”这类编号，CSS 计数器是标准解法，它隐式依赖兄弟顺序：
p {
counter-increment: section;
}
p::before {
content: counter(section) ". ";
}
这个方案可靠、纯 CSS、无需 JS，但前提是元素有稳定且连续的兄弟关系。容易踩的坑包括：
- 父容器未重置计数器（
counter-reset: section），导致序号累加到意外值 - 中间有
display: none元素——它仍参与计数；而visibility: hidden不影响计数 - 嵌套使用时未用不同计数器名，造成冲突
真正动态读取并响应 DOM 变化的序号（比如拖拽后实时更新显示），只能靠 JavaScript 调用 Array.prototype.indexOf() 或 parentNode.children 索引。CSS 没有那个能力——这不是兼容性问题，是设计边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
