CSS计数器需三步协同：counter-reset初始化计数器、counter-increment触发递增、::before+content: counter()渲染显示；缺一不可，且作用域、伪元素与选择器层级必须正确。
直接用 counter-reset 不会显示任何数字——它只是初始化，真正让序号出现的是 counter-increment 和 ::before + content: counter() 的组合。
为什么列表项上只写 counter-increment 还是没序号？
因为缺少两个关键环节：一是父容器没声明计数器起点，二是没用伪元素把值渲染出来。
-
counter-reset: item;必须写在列表容器（比如.article-list或ul）上，否则计数器根本没被创建 -
counter-increment: item;要加在每个要编号的子元素上（如.article-item），不是容器本身 -
.article-item::before { content: counter(item) ". "; }才是让数字真正“画”出来的一步；漏掉::before或content，页面就空着
怎样避免序号全变成 “1.”？
常见原因是把 counter-reset 错写在了列表项（.article-item）上，导致每项都重置计数器为 0，再 increment 一次就永远是 1。
- 检查选择器层级：
.article-list { counter-reset: item; }✅，.article-item { counter-increment: item; }✅ - 禁止写：
.article-item { counter-reset: item; }❌（这会让每个 item 都从 0 开始） - 如果列表用了
display: flex或grid，确保::before没被布局挤出可视区；必要时加flex-shrink: 0或position: absolute
如何让序号带前缀或换样式（比如 “第1节”、“A.”）？
counter() 支持第二个参数控制格式，但拼接文字必须用字符串字面量，不能用 CSS 运算符。
立即学习“前端免费学习笔记（深入）”；
- 阿拉伯数字加前缀：
content: "第" counter(item) "节"; - 大写字母：
content: counter(item, upper-alpha) ". ";→ 输出 A.、B. - 小写罗马数字：
content: counter(item, lower-roman) ". ";→ 输出 i.、ii. - 从 5 开始编号：
.article-list { counter-reset: item 4; }（注意是「初始值减 1」）
嵌套结构（如文章下有小节）怎么生成 “1.1” “1.2”？
单靠 counter() 不行，得用 counters() 并配合子级独立重置。
- 一级容器设
counter-reset: chapter;，一级项用counter-increment: chapter; - 二级容器（如
.chapter-section）设counter-reset: section;，二级项用counter-increment: section; - 二级项伪元素写：
content: counters(chapter, ".") "." counter(section) " "; - 注意：
counters()只对同名计数器生效；如果二级用了section，一级就不能也叫section，否则会被覆盖
最容易被忽略的是作用域继承：如果中间某层元素写了 counter-reset 但没传同名计数器下去，counters() 就会断链——不是 HTML 嵌套深就能自动继承，而是 CSS 规则必须显式延续。
