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