list-style-type仅支持浏览器预定义关键字值，如decimal、lower-roman、upper-alpha等，不接受字符串或图标；自定义序号（如“步骤1”）必须用counter-reset、counter-increment和::before伪元素实现。
list-style-type 支持哪些内置值？
直接用 list-style-type 只能切换浏览器预定义的序号类型，比如 decimal、lower-roman、upper-alpha 这些。它不接受自定义字符串或图标，也不能跳过某几个数字（比如从 3 开始）。常见错误是写成 list-style-type: "第1步" —— 这会完全失效，因为该属性只认关键字，不认字符串。
可用值包括：decimal、decimal-leading-zero、lower-roman、upper-roman、lower-greek、lower-latin、upper-latin、armenian、georgian 等。注意 georgian 在旧版 Safari 中不支持，armenian 在部分 Android WebView 中可能回退为 decimal。
想用“步骤1”“步骤2”这类文字序号怎么办？
必须放弃 list-style-type，改用 counter-reset + counter-increment + ::before 伪元素。这是唯一可靠方式。
实操要点：
- 给
ol或ul设置counter-reset: step; - 给
li设置counter-increment: step; - 用
li::before { content: "步骤" counter(step); }拼接前缀 - 如果需要从 3 开始，写成
counter-reset: step 2;（注意：这里设的是初始值，不是起始显示数）
如何让序号和文字对齐不换行？
默认 ::before 是 inline 元素，容易被折行或挤到下一行。常见现象是“步骤10 文字”在窄容器里变成两行。
解决方法：
- 给
li::before加display: inline-block;并设置固定宽度（如width: 5em;） - 或者用
white-space: nowrap;防止序号内部折行 - 避免在
content里用\A换行符——它不会按预期生效，CSS 伪元素中换行需配合display: block;和margin
用 CSS counters 替代 list-style-type 时要注意什么？
计数器是作用域化的，嵌套列表容易出错。比如 ol > li 里再套 ol，内层会继承外层计数器，导致序号错乱。
关键细节：
- 每个嵌套层级应声明独立计数器名，例如外层
counter-reset: step;，内层counter-reset: substep; -
counter()函数不支持格式化（比如补零），要实现01、02得靠 JS 或服务端生成，CSS 无原生方案 - IE11 支持
counter()，但不支持counters()（用于嵌套层级分隔），如需兼容得手动展开
真正想“自定义序号”，就绕不开 counter；指望 list-style-type 做文字拼接或图标替换，只会卡在第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
