背景
感觉好久没有学到新东西了，好忧桑，没有新知识摄入的一天就是混吃等死的一天，emo。突然发现群里有人问问题还没有人回复，于是进去看看：
问题(“自定”应该是“自动”目测打错了)
计数器？好像不太了解，之后看到有大佬回复&提问的同学把html都发来了，搓搓手，let me seesee
现象
先贴下代码
移除dom的时候，没有重新计算序号
过程
首先查查计数器指的是什么，
CSS 计数器是通过 counter-reset 和 counter-increment 属性来创建和操作的
代码里使用的属性
接下来查查相关的属性
counter-reset：设置计数器名称和初始值counter-increment ：设置某个选取器每次出现的计数器增量(可为负数)counter(): 调用计数器并设置计数器样式再加上代码大概了解了是怎么使用的了。这么看来作用就是自动按照顺序添加标志（很nice啊，特别适用文档！）
但是为什么移除的时候没有更新标志呢？
这么常见的场景讲道理不会有问题额。
尝试1
怀疑和嵌套层次有关，因为js里写的box.removeChild(p)，所以我们不要 div了，直接直接变为p插入
...
...
层级如图
但是删除之后还是不更新，难道不是层次问题？？
尝试2
难道是需要触发一下重绘才能进行计算？也不对。。。毕竟remove之后已经重排+重绘了。。
尝试3
再次审视代码，直到我看到了css！！！
...
.p-class{
cursor: pointer;
}
.p-class::after{
counter-increment: myCounter;
content: counter(myCounter, cjk-ideographic);
}
...
这这这！！ counter-increment属性写在伪类里了！！直觉一定是他的问题！！改一下！！把它作用到我们remove的p标签上
...
.p-class{
cursor: pointer;
counter-increment: myCounter;
}
.p-class::after{
content: counter(myCounter, cjk-ideographic);
}
...
trytry
哑巴里！！！可以啦！
那我们恢复到最开始的代码，既然js移除的是div,那么我们把css里改成计算div是不是也ok？
没问题，正确&正常的执行！！！
是作用对象的问题！！！！
counter使用场景
不用说，最适合的就是做目录~
做文章最下面的书籍引用也很方便合适
// css
:root {
counter-reset: link;
}
a[href] {
counter-increment: link;
}
a[href]:empty::after {
content: "[" counter(link) "]";
}
//html
Do not forget to leave a message!
是不是~
结尾（敲黑板）
要是一段你觉得正确的代码运行后得到了不科学的结果，且一搜发现没有相关bug的词条，那么99%都是你的问题。毕竟用的人这么多还没人反馈多半是你哪里miss了。
记得先看看代码有没有漏写、错写，再者看看用的api使用是否正确，css等需要仔细看mdn充分了解后再使用，以上。
贴下最终的完整版