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 和伪元素重造一套编号系统。


















