HTML列表标签如何结合CSS计数器制作美观的序号列表

CSS计数器（counter-reset和counter-increment）是实现自定义序号列表的核心，支持带背景数字、“第1步”样式、多级嵌套（如1.1）、可点击编号及灵活起始/跳号控制，突破原生<ol>的样式限制。

直接用 <ol> 很难做出真正美观、可控的序号列表——比如带圆圈背景的数字、“第1步”样式、或可点击的括号编号。CSS 计数器（counter-reset 和 counter-increment）才是实现这些效果的核心手段，它绕过原生限制，把编号变成可样式化、可嵌套、可交互的内容。

让序号脱离默认样式，完全自定义外观

原生 <ol> 的编号是 ::marker，无法加背景、圆角、阴影或单独设颜色。要用计数器接管：

1. 给列表容器（如 <ol class="steps">）加 counter-reset: step;
2. 给每个 <li> 设 counter-increment: step;，并移除默认序号：list-style: none;
3. 用 li::before 输出编号，例如：content: "第" counter(step) "步";，再配 display: inline-flex、background: #007bff、color: white 等样式

支持多级嵌套编号（如 1.1、1.2、2.1）

<ol> 嵌套时层级固定，样式难统一。计数器通过分层声明+counters() 函数灵活处理：

1. 外层 ol 设 counter-reset: chapter;，内层 ol 设 counter-reset: section;
2. 各级 li 分别设 counter-increment: chapter; 或 counter-increment: section;
3. 用 content: counters(chapter, ".") " "; 拼出 “1.1”、“1.2” 这类格式；注意不是 counter()，否则只显示最内层值

实现可点击编号（如“(1)”跳转锚点）

原生编号不可点击。但把编号塞进 <a> 标签的 ::before 里，就能天然响应点击：

1. 结构写成：<li><a href="#step1">第一步说明</a></li>
2. CSS 中让 a::before 承担编号：counter-increment: step; + content: "(" counter(step) ")";
3. 整个 <a> 可点击，编号区域自动成为链接一部分，无需 JS

控制起始值、跳号或奇偶编号

start 属性只能设整数起点，且无法跳号；计数器则更精细：

1. 从 3 开始：counter-reset: item 2;（因为 counter-increment 会先加 1）
2. 只显示奇数：counter-reset: odd -1; + counter-increment: odd 2;
3. 跳过某项不编号：对该 li 设 counter-increment: item 0;，而非隐藏元素（隐藏仍会递增）