list-style-type仅支持预设关键字如decimal、square、disc等，其中hebrew、armenian等冷门值兼容性差；真要自定义序号内容、跳号或嵌套编号，必须用CSS counter()配合counter-reset和counter-increment。
直接说结论：list-style 本身不能“自定义序号内容”，只能切换预设样式或换图；真要加前缀、跳号、嵌套编号，必须用 CSS counter。
list-style-type 支持哪些值，哪些其实不实用
它只接受关键字，不支持任意字符串或图标：decimal、lower-roman、upper-alpha、disc、square、none 是常用且稳定支持的。但注意：
-
hebrew、armenian等冷门值在 Safari 和旧版 Firefox 中可能渲染异常或回退为decimal -
none只隐藏序号，不移除缩进——得配padding-left: 0或margin-left: 0才真正“清空” - 写
list-style-type: "Step "会完全失效，CSS 不允许字符串字面量
list-style 和 counter 同时用，为什么序号变双份
因为浏览器原生序号（由 ol 自动产生）和你用 ::before + counter() 插入的内容是两套系统，互不感知。常见错误现象：
- 没加
list-style: none，结果看到 “1. Step 1: …” - 写了
list-style-type: none却漏了list-style-position和list-style-image，某些浏览器仍残留占位 - 正确做法是直接上
list-style: none，一揽子清掉 type/image/position
counter() 函数里 style 参数怎么选才不出错
counter(name, style) 的 style 必须严格匹配 list-style-type 的合法值，比如 lower-roman、upper-alpha，但不能写 roman 或 uppercase：
- 错误：
counter(step, roman)→ 渲染成 0 或直接忽略 - 正确：
counter(step, lower-roman)→ 输出 i、ii、iii - 想实现 “1.1”、“1.2” 这类嵌套编号，必须用
counters(step, ".")，且父容器要独立counter-reset -
counter()只能在::before或::after的content里用，写在color或font-size里无效
为什么加了 counter-increment 还是显示 0
最常踩的坑是忘了 counter-reset，或者放错位置：
-
counter-reset: step必须写在列表容器上（如ol或ul），不能写在li上——否则每个li都重置一次，永远是 1 -
counter-increment: step要写在触发计数的元素上，通常是li::before，不是li本身 - 名称大小写必须一致：
counter-reset: Step和counter-increment: step不匹配，计数器不会动 - display: none 的
li仍参与计数——counter-increment 在渲染前就执行了
真正难的不是写对语法，而是理解 counter 是作用域化的、延迟渲染的、且和 display 类型强绑定——li 被改成 display: flex 后，::before 可能被挤出可视区，这时得加 flex-shrink: 0 或调整 order。
