本文详解如何利用 CSS 计数器（counter）在非直接兄弟关系的元素间实现连续自动编号，通过合理设置 counter-increment 的作用节点（如父容器），避免依赖 .numbers 自身触发计数，从而突破 DOM 层级限制。
本文详解如何利用 css 计数器（counter）在非直接兄弟关系的元素间实现连续自动编号，通过合理设置 `counter-increment` 的作用节点（如父容器），避免依赖 `.numbers` 自身触发计数，从而突破 dom 层级限制。
CSS 的 counter-increment 默认仅对同级兄弟元素生效——这是初学者常遇到的误区：若将 counter-increment: item 直接写在 .numbers 上，而 .numbers 元素分散在不同嵌套层级（例如各自位于独立的 .col 内），它们并非 DOM 同级节点，因此计数器不会按预期递增，最终可能全部显示为 1: 或出现重复/跳号。
✅ 正确解法是将计数逻辑上移至共同祖先且结构上为兄弟的容器上。在示例中，.col 元素是同一父级 .row 下的直系子元素，天然构成兄弟关系。只需为每个 .col 触发一次计数，再由其内部的 .numbers::before 引用该计数器，即可实现全局连续编号：
/* 在每个 .col 上递增计数器 —— 它们是真正的兄弟元素 */
.col {
counter-increment: item;
}
/* .numbers 仅负责显示，不参与计数 */
.numbers::before {
content: counter(item) ":";
}HTML 结构保持不变，语义清晰且无需 JavaScript 干预：
<div class="container">
<div class="row">
<div class="col">
<div class="numbers"></div>
Column
</div>
<div class="col">
<div class="numbers"></div>
Column
</div>
<div class="col">
<div class="numbers"></div>
Column
</div>
<div class="col">
<div class="numbers"></div>
Column
</div>
</div>
</div>渲染结果为：
立即学习“前端免费学习笔记（深入）”；
1: Column 2: Column 3: Column 4: Column
⚠️ 注意事项：
- 计数器作用域由
counter-reset显式定义（如未声明，默认在根元素重置），若需多组独立编号（如多个.row各自从 1 开始），应在.row上添加counter-reset: item； - 避免在非兄弟元素（如嵌套更深的
.numbers或跨.row的元素）上直接使用counter-increment，否则计数行为不可控； - 此方案纯 CSS 实现，零 JS、无运行时开销，兼容所有支持 CSS counters 的现代浏览器（Chrome 2+、Firefox 1+、Safari 3.1+、Edge 12+）。
总结：CSS 计数器的本质是「基于块级上下文与兄弟关系的声明式计数」。只要找准具备兄弟关系的合适载体（如本例中的 .col），就能优雅解决非相邻、非同层元素的自动编号需求——无需妥协于 JavaScript，也无需破坏语义结构。
