counter-reset 单独使用无效，因它仅初始化计数器而不累加；必须配合 counter-increment 增值及 ::before + content: counter() 渲染。正确做法是容器设 counter-reset，列表项设 counter-increment，伪元素用 content 插入值。
CSS counter-reset 本身不能“自动生成序号”——它只是初始化计数器，真正起作用的是 counter-increment 和 content 配合伪元素。 直接只写 counter-reset，列表项上什么数字都不会出现。
为什么 counter-reset 单独用没效果？
它只是声明“从这里开始一个新的计数器”，类似 JavaScript 里写 let i = 0，但不调用 i++ 就永远是 0。CSS 中必须搭配 counter-increment 才会累加，再用 ::before + content: counter(...) 把值渲染出来。
-
counter-reset: mylist→ 只是重置计数器mylist到 0（或指定值） -
counter-increment: mylist→ 每匹配一次该规则，mylist加 1 -
content: counter(mylist)→ 把当前mylist值插入伪元素内容中
在 <ul>/</ul>
<ol></ol> 或自定义盒模型列表中正确启用序号
常见错误是把 counter-reset 和 counter-increment 都写在 li 上，导致每次 li 都重置计数器，结果全是 “1”。正确做法是：
- 在列表容器（如
ul、ol或.list）上设counter-reset: mylist - 在每个列表项（
li或.list-item）上设counter-increment: mylist - 用
li::before { content: counter(mylist) ". " }渲染序号
示例：
ul {
counter-reset: section;
}
ul li {
counter-increment: section;
}
ul li::before {
content: counter(section) ". ";
margin-right: 8px;
}
嵌套列表时如何让子序号继承父级（如 2.1、2.2）？
靠 counter() 的第二个参数实现。默认显示一级计数器，传入分隔符后会自动拼接父级值：
-
counter(section)→ 输出1、2 -
counter(subsection, decimal)→ 输出1、2（纯数字） -
counter(section) "." counter(subsection)→ 手动拼成1.1、1.2 -
counter(subsection, decimal)+ 在ul ul上设counter-reset: subsection+counter-increment: subsection
关键点：子列表容器（如第二层 ul）必须有自己的 counter-reset，且子项用 counter-increment 增量自己的计数器，否则不会形成层级关系。
容易被忽略的兼容性和样式陷阱
counter-reset 和 counter-increment 在所有现代浏览器中支持良好（IE8+），但有几点实际开发中常踩坑：
- 计数器名区分大小写：
counter(MyList)和counter(mylist)是两个不同计数器 -
counter-reset设在 display: none 元素上仍生效，但该元素的counter-increment不触发 - 若列表项用
flex或grid布局，::before默认是 inline，需加display: inline-block或调整对齐，否则序号可能错位 - 用
content插入数字后，无法用text-align控制序号对齐——要控制宽度或用margin/padding
最常漏掉的一步：忘记给 ::before 设置 display 或 white-space，导致换行或缩进异常；或者把 counter-reset 错放在 li 而非容器上，整个序号就崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
