list-style-type 支持 decimal、lower-roman、upper-alpha、disc、circle、square、none 等预定义值；需配合 list-style: none 清除原生序号以避免与 counter 冲突；counter 可实现“step 1”等自定义前缀及嵌套独立计数。
list-style-type 能改哪些序号样式
list-style-type 是最直接控制列表序号外观的 CSS 属性，但它只支持预定义关键字，不能任意绘制或插入图标。常见可用值包括：decimal（1, 2, 3）、lower-roman（i, ii, iii）、upper-alpha（A, B, C）、disc、circle、square 等。注意：none 会彻底隐藏序号（但不移除缩进），若要清空缩进需额外设 padding-left: 0 或 list-style: none 配合 margin-left: 0。
用 counter 实现自定义数字前缀（比如“Step 1”“Step 2”）
当需要在序号前加固定文本、或跳过某些项、或跨多个列表连续计数时，counter 是唯一可靠方案。它分三步：用 counter-reset 初始化计数器，用 counter-increment 每次递增，再用 ::before + content: counter(...) 插入显示内容。
示例（带前缀的有序列表）：
ol.step {
counter-reset: step-counter;
}
ol.step li {
counter-increment: step-counter;
}
ol.step li::before {
content: "Step " counter(step-counter) ": ";
font-weight: bold;
}
关键点：
-
counter-reset通常写在父容器（如ol）上，值为计数器名，可选初始值（如counter-reset: step-counter 10） -
counter-increment写在要触发计数的元素上（通常是li），默认每次+1，也可写step-counter 2跳号 -
content中必须用counter()函数调用，不能直接拼字符串变量
list-style-type 和 counter 同时用会怎样
会冲突——只要用了 counter + ::before，就应先清除原生序号，否则出现双编号。正确做法是显式关闭原生样式：
- 对
ol设置list-style-type: none - 或更彻底地写
list-style: none（同时清掉 type、image、position） - 别依赖
display: block之类间接隐藏，它不保证移除原生序号占位
另外，counter() 默认输出十进制数字；如需罗马数字或字母，用 counter(step-counter, upper-roman)，可选值和 list-style-type 一致，但仅限于该函数内生效。
嵌套列表中 counter 容易漏掉的细节
多层嵌套时，每个层级应使用不同计数器名（如 section、subsection），否则子项会干扰父计数。更麻烦的是「恢复计数」需求——比如二级列表想从 1 重新开始，就必须在每个二级容器上重置对应计数器：
ol.sections { counter-reset: section; }
ol.sections > li { counter-increment: section; }
ol.subsections { counter-reset: subsection; } /* 关键：每个子 ol 都要重置 */
ol.subsections > li { counter-increment: subsection; }
还有一点常被忽略：如果列表项是动态插入（如 JS append），counter-increment 不会自动触发，必须确保新 li 元素也匹配到对应规则，且未被其他 CSS 覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
