::marker仅支持color、font-、content及部分text-属性，不支持background、margin等布局属性；旧版safari和ie完全不支持，需用counter-reset+::before降级；list-style-image会覆盖::marker。
为什么::marker在旧版 Safari 或 IE 里完全不生效
因为 ::marker 是较新的伪元素，Firefox 96+、Chrome 86+、Safari 15.4+ 才开始支持。低于这些版本的 Safari（比如 14.x）和所有 IE 版本会直接忽略该规则，不报错也不渲染——你改了 color 或 content 却看不到变化，不是写错了，是浏览器根本不认。
常见应对方式是用 counter-reset + ::before 做降级：给父容器加 counter-reset: list-item;，再给 li::before 写 content: counter(list-item) ". ";。这样即使 ::marker 失效，也能兜底显示序号。
- 不要依赖
::marker做唯一方案，尤其面向企业内网或教育场景（老旧 Safari/IE 仍存） - 检查目标用户实际浏览器分布，可用 caniuse.com/marker 快速验证支持率
- 若必须用
::marker，建议搭配@supports (selector(::marker)) { ... }进行特性检测
::marker 能设 background 或 margin 吗
不能。CSS 规范明确限制了 ::marker 可用的属性：仅限 color、font-*（如 font-size、font-family）、content，以及部分 text-* 属性（如 text-align）。写 background: #eee; 或 margin-right: 0.5em; 不会报错，但浏览器会静默丢弃，控制台也无提示。
想实现带背景色的圆形数字？必须放弃 ::marker，改用 li::before + position: absolute 方案。否则你会卡在“明明写了 background 却没颜色”的死循环里。
-
::marker的定位能力极弱，无法脱离文本流，所以没法做悬浮、偏移、遮罩等效果 - 如果只是调字号、加粗、换字体，
::marker简洁高效；一旦涉及布局或视觉装饰，它就不是正确工具 - 别试图用
display: inline-flex强行扩展::marker功能——无效且不可预测
content 在 ::marker 里怎么安全替换编号
必须用 counter() 函数，不能写死字符串。例如 ol li::marker { content: "Step " counter(list-item) ". "; } 是合法的；而 content: "▶ "; 会让所有项都显示相同符号，彻底丢失编号逻辑。
注意空格是手动加的：counter(list-item) 返回纯数字（如 1），不会自动补空格。写成 "Step"counter(list-item)"." 会渲染成 Step1.，必须显式写 "Step " counter(list-item) ". "。
-
list-item是<ol></ol>的默认计数器名，不用额外counter-reset - 不支持
attr()、url()、嵌套伪元素，也不能用条件表达式 - 如果想加图标，只能用 Unicode 字符拼接，如
content: "✓ " counter(list-item) ". ";，但要注意跨平台渲染一致性
同时用了 list-style-image 和 ::marker，为什么序号不见了
因为 list-style-image 会覆盖 ::marker。当两者共存时，浏览器优先使用图像作为标记，::marker 规则被跳过——不是 bug，是规范行为。
如果你需要图标 + 编号组合（比如 “① 图标文字”），list-style-image 就不适用。得回到 li::before 路线：一个伪元素画图标，另一个伪元素放编号，或者把图标和编号一起写进 content（如 content: "① " counter(item) ". ";）。
- 别在同一个列表上混用
list-style-image和::marker，结果不可控 -
list-style-type和::marker可以共存（后者能覆盖前者的样式），但list-style-image是例外 - 想保留语义又加图标？考虑用
background-image配合padding-left推开内容，比list-style-image更可控
::marker，而是判断什么时候不该用它——只要需求里出现“背景”“圆角”“多行缩进”“图标混合编号”，就得立刻切到 counter-reset + ::before 路线。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
