css计数器（counter-reset和counter-increment）是实现自定义序号列表的核心，支持带背景数字、“第1步”样式、多级嵌套（如1.1）、可点击编号及灵活起始/跳号控制，突破原生的样式限制。
直接用 <ol></ol> 很难做出真正美观、可控的序号列表——比如带圆圈背景的数字、“第1步”样式、或可点击的括号编号。CSS 计数器（counter-reset 和 counter-increment）才是实现这些效果的核心手段，它绕过原生限制，把编号变成可样式化、可嵌套、可交互的内容。
让序号脱离默认样式，完全自定义外观
原生 <ol></ol> 的编号是 ::marker，无法加背景、圆角、阴影或单独设颜色。要用计数器接管：
- 给列表容器（如
<ol class="steps"></ol>）加counter-reset: step; - 给每个
<li>设counter-increment: step;，并移除默认序号：list-style: none; - 用
li::before输出编号，例如：content: "第" counter(step) "步";，再配display: inline-flex、background: #007bff、color: white等样式
支持多级嵌套编号（如 1.1、1.2、2.1）
<ol></ol> 嵌套时层级固定，样式难统一。计数器通过分层声明+counters() 函数灵活处理：
- 外层
ol设counter-reset: chapter;，内层ol设counter-reset: section; - 各级
li分别设counter-increment: chapter;或counter-increment: section; - 用
content: counters(chapter, ".") " ";拼出 “1.1”、“1.2” 这类格式；注意不是counter()，否则只显示最内层值
实现可点击编号（如“(1)”跳转锚点）
原生编号不可点击。但把编号塞进 @#@#@#@#@#@#@#@#@#@0
a::before 承担编号：counter-increment: step; + content: "(" counter(step) ")";
<a></a> 可点击，编号区域自动成为链接一部分，无需 JS控制起始值、跳号或奇偶编号
start 属性只能设整数起点，且无法跳号；计数器则更精细：
- 从 3 开始：
counter-reset: item 2;（因为counter-increment会先加 1） - 只显示奇数：
counter-reset: odd -1;+counter-increment: odd 2; - 跳过某项不编号：对该
li设counter-increment: item 0;，而非隐藏元素（隐藏仍会递增）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
