截至2026年8月，Chrome/Edge 86+、Firefox 68+、Safari 15.4+（含iOS）稳定支持::marker的color和font-size；旧版Safari 15.3及更早、Chrome 80以下、所有IE均静默忽略该规则。
::marker 能直接设 color 和 font-size，但必须满足三个前提：浏览器支持、列表类型有效、没被其他样式压制。
哪些浏览器真正支持 color 和 font-size？
截至 2026 年 8 月，稳定支持这两个属性的环境是：
-
Chrome/Edge86+ -
Firefox68+ -
Safari15.4+（含 iOS Safari 15.4）
旧版 Safari（15.3 及更早）、Chrome 80 以下、所有 IE 版本——::marker 规则会被静默忽略，DevTools 里整条规则会显示为划掉（strikethrough），不是你写错了，是它根本没加载。
li::marker { color: red; font-size: 1.2em; } 没生效？先检查这几点
常见失效不是兼容性问题，而是规则被覆盖或条件不满足：
立即学习“前端免费学习笔记（深入）”；
-
ul或ol上写了list-style: none—— 这会彻底禁用原生标记，::marker失去作用对象 -
li的父容器用了display: flex或display: grid，导致子项li的display计算值不再是list-item - 父级设置了
color，而::marker默认继承它；如果父级color是灰色，你又没给li显式设色，::marker就不会变红 - 用了
list-style-image—— 它优先级高于::marker，会直接覆盖
为什么不能用 margin 或 transform 移动符号？
::marker 不是一个独立盒子，没有外边距、内边距或定位能力。它只响应排版类属性：
- 可用：
color、font-size、font-weight（部分浏览器）、content（配合counter()更可靠） - 不可用：
margin、padding、background、transform、display—— 写了也无效，且浏览器不报错
想“把数字往右挪一点”，得换思路：list-style-position: inside + padding-left 或 text-indent 调整整体缩进；或者放弃 ::marker，用 list-style: none + counter + li::before 手动控制位置。
最稳的 fallback 方案：当 ::marker 不可用时怎么保底
如果项目需兼容 Safari 15.3 或更低版本，或要加背景、圆角、SVG 图标等复杂效果，::marker 就不是选项了：
- 先写
li { list-style: none; }，清掉原生符号 - 对
ol：用counter-reset+counter-increment+li::before { content: counter(item) ". "; } - 对
ul：直接li::before { content: "•"; color: #e74c3c; margin-inline-end: 0.5em; }
这个方案所有现代浏览器都认，content、color、margin-inline-end（适配 RTL）全可用，且不会和原生符号打架——前提是别漏掉 list-style: none。
