::marker 仅支持 color、font-size、font-weight、font-family、text-align 和 content（限 counter() 或字符串），不支持布局属性；content 混合写法兼容性差，深度定制应改用 counter + ::before 并补全 ARIA 属性。
::marker 能直接改有序列表数字的颜色和大小，但不是所有样式都生效，content 在 ol li::marker 中也不能随意重写编号格式——浏览器支持有明确边界。
哪些样式在 ::marker 里真正有效
::marker 只接受有限的 CSS 属性，现代浏览器（Chrome 89+、Firefox 81+、Safari 15.4+）确认支持的包括：color、font-size、font-weight、font-family、text-align 和 content（仅限 counter() 或字符串字面量）。不支持 margin、padding、background、display 等布局类属性。
-
color和font-size基本稳定，可放心用 -
content: counter(item) ". "在ol li::marker中有效，但不能写成content: "第" counter(item) "条"—— 多数浏览器会忽略非纯counter()+ 字符串拼接的写法 - 若父元素（如
ol）设置了color，::marker会继承它；想覆盖就得提高选择器权重或加!important
为什么 content 在 ol li::marker 里经常“没反应”
常见错误是把 content 当成通用文本插入工具。实际上，::marker 的 content 只允许两种模式：
- 纯
counter()函数调用，例如content: counter(item) - 字符串字面量，例如
content: "→ "（这对ul更友好） - 两者混合（如
content: "(" counter(item) ")"）在 Safari 15.4–16.x 中部分失效，Chrome/Firefox 支持较好，但不是所有版本都一致 - 用
attr()、url()或计算值（如calc()）会直接被忽略
别踩坑：当 ::marker 不起作用时先查这三件事
很多“改不了颜色”的问题其实和 ::marker 本身无关：
立即学习“前端免费学习笔记（深入）”；
-
li元素没有触发display: list-item—— 比如父容器用了display: flex或显式写了display: block，::marker就不会渲染 - 用了
list-style-image：它会完全接管标记区域，::marker规则被跳过 - 浏览器 UA 样式表里已有高优先级的
color（比如 Chrome 默认ol的color: -internal-light-dark(black, white)），需用更具体的选择器覆盖，例如ol li::marker而非泛泛的li::marker
真要深度定制编号格式？绕开 ::marker 用 counter + ::before
如果目标是 “第1条”、“1.”、“一、” 这类带前缀/后缀/中文序号的格式，::marker 不可靠。稳妥做法是关掉原生计数，手动控制：
ol {
list-style: none;
counter-reset: item;
}
ol li {
counter-increment: item;
}
ol li::before {
content: "第" counter(item) "条：";
color: #3a7ebf;
font-weight: bold;
margin-right: 0.5em;
display: inline-block;
width: 3em;
}
注意：这种写法会破坏屏幕阅读器对原生列表结构的识别，必须补上 role="list" 和 role="listitem" 才能维持可访问性。
