嵌套元素中CSS计数器针对[data-fragment-index]递增异常问题

问题根源 #

你遇到的计数异常（出现1、3、3、4、5而非连续序列），核心原因是页面中存在嵌套的[data-fragment-index]元素。当前的CSS选择器会匹配所有带该属性的元素，包括父元素及其子元素，导致同一个逻辑片段触发了多次counter-increment操作，最终打乱了计数顺序。

修复方案 #

修改CSS选择器，仅针对不被其他[data-fragment-index]元素包含的目标元素，避免嵌套元素重复触发计数：

section.slide [data-fragment-index]:not([data-fragment-index] *) {
  counter-increment: my-counter;
}

原理详解 #

:not([data-fragment-index] *) 这个伪类选择器的作用是：排除所有属于[data-fragment-index]元素后代的目标元素。这样一来，只有最外层的、独立的[data-fragment-index]元素才会触发计数器递增，保证计数从1到5连续递增。

备选方案（结构明确时使用） #

如果你的[data-fragment-index]元素都是section.slide的直接子元素，也可以使用直接子选择器>来限定范围，这个方案性能更优：

section.slide > [data-fragment-index] {
  counter-increment: my-counter;
}

注意：该方案仅适用于目标元素无嵌套的场景，若存在多层嵌套结构，优先使用第一种方案。

内容的提问来源于stack exchange，提问作者Joshua Muheim