list-style-type仅支持预定义关键字，无法自定义字符串；合法值分三类：有序列表（如decimal、lower-roman）、无序列表（disc、circle）及特殊控制值（none、armenian等）；自定义序号须用css counter+::before伪元素方案。
list-style-type 不能真正自定义序号样式，它只接受预定义关键字，写 "✅"、"Step " 或任何自定义字符串都会被浏览器直接忽略，回退到默认值（decimal 或 disc）。
哪些值是 list-style-type 真正支持的
它本质是“类型枚举”，不是“样式编辑器”。合法值分三类：
-
有序列表常用值：
decimal、lower-roman、upper-alpha、georgian、cjk-ideographic -
无序列表常用值：
disc、circle、square -
特殊控制值：
none（隐藏符号，但不移除缩进）、armenian、hebrew等（多语言支持，兼容性需查 CanIUse）
注意：list-style-type: "1."、list-style-type: "→"、list-style-type: \2705 全部无效 —— 浏览器按规范校验，非法值直接丢弃，不报错也不提示。
list-style-type: none 后为什么文字还偏左？
因为 none 只隐藏序号，不重置默认缩进。浏览器对 ol 和 ul 默认设了 padding-left: 40px（或 2.5em），这个空间还在。
- 必须显式清除：
ol { padding-left: 0; } - 若用
list-style: none（简写），它等价于list-style-type: none; list-style-position: outside; list-style-image: none;，但依然不影响padding - 仅靠
margin-left: 0不够 ——padding-left是根源
想用 ✅、Step 1、1.2.3 这类样式，该用什么？
唯一可靠路径是 CSS counter + ::before 伪元素。它绕过 list-style-type 的限制，完全接管编号逻辑。
- 先初始化：
ol { counter-reset: step; } - 每项递增：
ol li { counter-increment: step; } - 插入内容：
ol li::before { content: "Step " counter(step) ": "; } - 必须同步禁用原生序号：
ol { list-style: none; padding-left: 0; }，否则双编号并存 - 嵌套编号用
counters(step, ".")，且父级要独立counter-reset
示例中 content 可拼接任意字符串、空格、标点，还能加 color、font-size 控制外观 —— 这才是真正的“自定义”。
为什么不用 ::marker？
::marker 看似简洁：ol li::marker { content: "✅"; }，但它目前兼容性差：
- Chrome 89+ / Firefox 89+ / Safari 15.4+ 支持
- iOS 15.3 及更早版本、Android 10 WebView 基本不支持
- 无法做复杂拼接（如
"Step " counter()），也不能跨列表连续计数
除非你明确只面向现代桌面端，否则仍推荐 counter + ::before 方案 —— 它从 IE11 起就稳定可用，控制粒度也更细。
真正需要“自定义”的地方，list-style-type 就是条死胡同。所有能跑通的方案，本质上都是放弃它，用 counter 和伪元素重造一套编号系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
