本文介绍如何使用 css 计数器（counter）为非直接兄弟关系的元素实现全局自动编号，并通过调整计数作用域（如在父容器上递增）来绕过 css 无法跨 dom 树层级自动延续计数的限制。
本文介绍如何使用 css 计数器（counter）为非直接兄弟关系的元素实现全局自动编号，并通过调整计数作用域（如在父容器上递增）来绕过 css 无法跨 dom 树层级自动延续计数的限制。
CSS 的 counter-increment 属性本身仅在声明该属性的元素被渲染时触发递增，且计数器的作用域默认由其声明位置决定——它不关心语义结构，只依赖于渲染树中的实际应用顺序。因此，当 .numbers 元素彼此不是兄弟节点（例如分散在不同嵌套层级中），直接在 .numbers 上设置 counter-increment: item 会导致每个元素独立初始化并递增，无法形成连续序列。
✅ 正确解法：将 counter-increment 提升至共同祖先（如 .col），再在目标伪元素中引用计数器。这样，只要 .col 元素按文档流顺序渲染，计数器就会自然累加，而 .numbers::before 仅负责显示当前值，不参与递增逻辑。
以下为可直接运行的完整示例：
<style>
/* 在每个 .col 上递增计数器 —— 它们是同级兄弟，保证顺序 */
.col {
counter-increment: item;
}
/* .numbers 仅读取当前计数值，不修改计数器 */
.numbers::before {
content: counter(item) ": ";
font-weight: bold;
}
</style>
<div class="container">
<div class="row">
<div class="col">
<div class="numbers"></div>
Column A
</div>
<div class="col">
<div class="numbers"></div>
Column B
</div>
<div class="col">
<div class="numbers"></div>
Column C
</div>
<div class="col">
<div class="numbers"></div>
Column D
</div>
</div>
</div>输出效果：
立即学习“前端免费学习笔记（深入）”；
1: Column A 2: Column B 3: Column C 4: Column D
⚠️ 注意事项：
- 计数器名称（如
item）必须全局唯一；若页面存在多个独立编号序列，应使用不同名称（如section-counter、step-counter）并配合counter-reset初始化； - 若
.col中包含其他需递增的元素，或存在条件性隐藏（如display: none），需注意：counter-increment仍会在渲染时执行（即使元素不可见），但visibility: hidden不影响计数； - 该方案纯 CSS、零 JavaScript、无性能开销，适用于静态内容或服务端渲染场景；动态增删
.col时，浏览器会自动重计算计数器，无需手动干预。
总结：CSS 计数器并非“绑定到某类元素”，而是“在某类元素渲染时触发行为”。掌握这一本质，即可灵活控制编号节奏——把递增逻辑交给结构清晰的容器（如 .col），把展示逻辑交给装饰性元素（如 .numbers::before），便能优雅解决非兄弟元素的连续编号需求。
