截至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。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
