因为::marker的content只负责渲染，不参与计数，硬编码字符串会覆盖原生编号逻辑；必须用counter()函数动态取值，显式声明样式，且不支持布局属性，否则失效。
::marker 能美化有序列表数字，但必须配合 counter() 动态生成内容、显式声明样式，且不支持布局类属性；写死字符串或依赖继承会直接失效。
为什么 li::marker { content: "Step 1. " } 所有项都显示相同序号？
因为 content 在 ::marker 中不参与计数，只负责渲染。硬编码字符串会覆盖浏览器原生编号逻辑，所有 li 都输出完全相同的字面量。
- 必须用
counter(list-item)（<ol></ol>默认计数器名）或自定义计数器（如counter(step)）动态取值 - 空格要手动加：
content: "Step " counter(list-item) ". "，否则变成Step1. - 若用了
counter-reset: step，content中必须写counter(step)，写错名字返回空或 0
li::marker 设置了 color 或 font-size 却没生效？
常见不是语法错，而是宿主环境被破坏：
-
li设了display: flex或display: grid：隐式覆盖display: list-item，::marker直接不渲染 -
ol或li上写了list-style: none：原生标记被禁用，::marker失去作用对象（除非同时保留list-style-type） - 样式写在
ol::marker或ul::marker：伪元素只对li（及dt）有效，容器上无效 -
li没显式设color，而依赖父级继承：一旦::marker用了content，继承链就断了，必须单独写color
想加背景色、圆角、图标或右移数字，::marker 能行吗？
不能。规范明确限制其可用属性仅限：color、font-*、content、text-align 等少数几个。
-
background、margin、padding、transform、border全部静默忽略，控制台无提示 - 所谓“位置”只能靠
list-style-position: inside+padding-left或text-indent间接调整，无法精确偏移 - 要实现带背景的圆形数字、SVG 图标、悬停缩放等效果，必须降级为
list-style: none+li::before+counter()方案
兼容旧版 Safari 和 IE 的兜底写法怎么组织？
别只写 ::marker，用 @supports 特性检测做分层：
ol {
counter-reset: item;
}
ol li {
list-style: none;
}
/* 现代浏览器增强 */
@supports (selector(::marker)) {
ol li::marker {
content: counter(item) ". ";
color: #2563eb;
font-weight: bold;
}
}
/* 兜底：所有浏览器都走这里 */
ol li::before {
content: counter(item) ". ";
color: #2563eb;
font-weight: bold;
margin-right: 0.5em;
display: inline-block;
width: 1.8em;
text-align: right;
}
关键点是：两个方案共存时，::marker 优先级更高，但旧浏览器自动跳过；::before 不仅兼容性好（IE8+），还能自由控制布局——只是要注意语义完整性，别让屏幕阅读器丢失列表结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
