counter-increment 在嵌套列表中编号错乱是因为它按 DOM 渲染顺序触发且各计数器独立，脱离文档流或选择器未命中会导致跳号；解决需为每级设专属计数器名、父容器用 counter-reset 初始化、子项用 counter-increment 触发。
counter-increment 为什么在嵌套列表里编号会错乱？
CSS 的 counter-increment 不是“全局递增”，而是按元素在 DOM 中的渲染顺序逐个触发，且每个计数器独立作用于其匹配的元素。当盒模型复杂（比如用 div 模拟列表、存在 display: flex 或 position: absolute 子项），部分项可能脱离文档流或未被 CSS 选择器命中，导致跳号、重复或不触发。
常见错误现象包括：
- 子级
li编号从 1 重新开始，而非继承父级层级 - 使用
display: none或visibility: hidden的项仍参与计数 - Flex 容器中某些子项因
order属性改变渲染顺序，但计数仍按 HTML 顺序执行
解决关键是：显式控制计数器作用域和重置时机，而不是依赖默认行为。
如何为多级嵌套结构定义独立计数器？
必须为每一级定义专属计数器名（不能全用 section），并在父容器用 counter-reset 初始化，在子项用 counter-increment 触发。
立即学习“前端免费学习笔记（深入）”；
例如三级标题结构：
h2 { counter-increment: h2; }
h3 { counter-increment: h3; }
h4 { counter-increment: h4; }
h2:before { content: counter(h2) ". "; }
h3:before { content: counter(h2) "." counter(h3) ". "; }
h4:before { content: counter(h2) "." counter(h3) "." counter(h4) ". "; }
注意：
-
counter-reset必须写在父容器上（如article或section），不是写在h2上 - 若某级缺失（如只有
h2和h4），h4的counter(h3)会返回 0，需用counter(h3, decimal)+counter-reset: h3 0显式归零 - 不要试图用一个计数器模拟多级，
counter(section, decimal)只能线性递增，无法体现层级关系
flex/grid 布局中 counter-increment 失效怎么办？
counter-increment 依赖元素是否被 CSS 引擎“计入布局流”，但 display: flex 或 grid 下，若子项设置了 align-self: flex-end 或 grid-row: -1 等，只要它仍在文档流中（非 position: absolute），计数仍有效；真正失效的是以下情况：
- 元素被
display: contents包裹（父元素被移除，子节点直接提升到上层，计数器绑定丢失） - 使用
transform: translate()移动后，DOM 顺序未变，计数正常——但若配合pointer-events: none误以为“不可见=不参与”，其实仍计数 -
flex-direction: column-reverse下，视觉顺序颠倒，但counter-increment仍按 HTML 顺序执行，造成编号与视觉不符
应对方式：
- 避免对计数目标元素使用
display: contents - 如需反转顺序且保持编号一致，改用 JS 控制或预生成编号文本
- 对
grid布局，确保计数器声明写在 grid container 上，并用grid-area或伪类精确匹配项（如.item:nth-child(2n)）
如何让 counter-increment 跳过特定项？
CSS 本身没有 “skip” 语法，但可通过组合 counter-increment: none 和选择器排除实现。
例如：只对带 data-number="true" 的项编号：
.list-item { counter-increment: item; }
.list-item[data-number="false"] { counter-increment: none; }
.list-item:before { content: counter(item) ". "; }
注意：
-
counter-increment: none是合法值，表示“不修改该计数器”，不是“清零” - 不能用
:not(.skip)直接否定，因为counter-increment不支持伪类条件判断，必须靠属性或类名显式控制 - 若某项需编号但内容为空（如仅图标），仍要保留
counter-increment，否则后续项编号会少 1
实际复杂场景里，层级越深、布局越动态，越容易漏掉重置点或混淆计数器名。最稳妥的做法是：每级命名唯一、重置位置明确、避免跨组件共享同一计数器名——哪怕看起来冗余，也比后期调试时搞不清哪个 counter(reset) 没生效强。
