直接用::marker控制数字颜色、字体和前缀可行，但必须搭配counter-reset和counter-increment才能接管序号内容；list-style-type仅支持预设类型（如decimal、lower-roman），无法设置颜色、字体大小或添加“step ”等前缀，因其只定义标记类型而非样式。
直接用 ::marker 控制数字颜色、字体和前缀是可行的，但必须搭配 counter-reset 和 counter-increment 才能真正接管序号内容；纯靠 list-style-type 或 li::before 会破坏语义或可访问性。
为什么不能只改 list-style-type
list-style-type 只能选预设值（如 decimal、lower-roman），没法加颜色、字体大小，也不能插前缀（比如 “Step 1”）。它管的是“类型”，不是“样式”。想让步骤条里的 “1” 变蓝、加粗、前面带 “Step ”，就得绕开这个属性。
ol li::marker 配合计数器是现代解法
Chrome 115+、Firefox 109+、Safari 15.4+ 支持稳定，且保持原生语义和屏幕阅读器识别。关键点：
-
ol必须显式声明counter-reset: step;，否则counter(step)不生效 -
ol li要写counter-increment: step;，不然序号不递增 -
ol li::marker只能用content: counter(step);或纯字符串，不能拼接（如"Step " counter(step)在 Safari 16.2 会空白） - 真要加前缀/后缀，得退到
li::before+list-style: none，但需补role="listitem"和aria-hidden="true"
示例（安全写法）：
ol {
counter-reset: step;
}
ol li {
counter-increment: step;
list-style: none; /* 防止旧浏览器 fallback 冲突 */
}
ol li::marker {
color: #2563eb;
font-weight: bold;
font-family: "Inter", system-ui;
}
ol li::marker {
content: counter(step);
}
兼容老浏览器时怎么降级
若目标用户含 IE11、Android 4.4 WebView 或 Safari ::marker 会被完全忽略，连 fallback 都不触发。此时必须手动模拟：
- 给
ol加role="list"，每个li加role="listitem" - 用
li::before生成序号：content: counter(step) ". "; -
li::before加aria-hidden="true"，避免屏幕阅读器重复读“1. 第一步” - 显式设置
ol li的counter-increment，别依赖默认行为
注意：这种写法下，li::before 的样式（如 margin-inline-start）要手动调，::marker 原生的对齐逻辑就没了。
容易被忽略的细节
::marker 不继承 li 的 font-size，它只继承父元素（即 li）的字体相关属性，但 color 是独立控制的；vertical-align 和 margin-inline-start 能微调位置，但 padding、background、display 全无效；嵌套步骤条（比如子步骤）必须重置计数器，否则序号串了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
