html列表自定义序号有两种方式：一是用的start、type、reversed等原生属性快速调整；二是用css计数器（counter-reset、counter-increment、::before）实现带前缀、括号、嵌套、可点击的深度定制。
HTML列表标签配合CSS实现自定义序号样式，核心在于两种路径：基础控制用<ol></ol>原生属性，深度定制必须用CSS计数器（counter-reset + counter-increment + ::before）。前者适合简单调整，后者才能实现“第1章”“附录A-1”“（3）”这类带前缀、括号、嵌套或可点击的编号。
用基础属性快速调整
适用于起始值、类型、方向等常规修改，语义清晰且无需额外CSS：
-
start：指定起始数字，如
<ol start="3"></ol>从3开始编号 -
type：切换编号格式，支持
1（阿拉伯数字）、A（大写字母）、i（小写罗马数字）等 -
reversed：添加该属性使序号倒序，如
<ol reversed></ol>生成5、4、3… - 配合
list-style-type可覆盖type属性，例如ol { list-style-type: lower-alpha; }统一设为小写字母
用CSS计数器实现完全自定义
当需要加文字前缀、括号、颜色、字体，或让编号可点击时，必须接管计数逻辑。关键三步缺一不可：
- 在父容器（如
<ol class="custom"></ol>）上设counter-reset: item;——初始化计数器名称 - 在每个
<li>上设counter-increment: item;——触发递增 - 用
li::before伪元素输出：content: "(" counter(item) ") ";，还可加font-weight、color等样式 - 记得先清空原生序号：
li { list-style: none; }
让序号变成可点击链接
原生::marker不可交互，但用::before生成的编号属于链接的一部分，天然可点：
- 把
<li>内容包裹在<a href="#sec1"></a>中 - 将
::before伪元素加在a上而非li上，例如.myList a::before - 这样点击“(2)”或整行文本，都会触发跳转，无需JavaScript
处理多级嵌套编号
比如一级用“1.2”，二级用“1.2.1”，需分层定义计数器并用counters()函数：
- 外层
<ol></ol>设counter-reset: section;，内层<ol></ol>设counter-reset: subsection; - 各级
<li>分别设counter-increment: section;和counter-increment: subsection; - 用
content: counters(section, ".") " ";生成连续层级，如“1.2.1”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
