li::marker { color: #007bff; } 可单独改序号颜色，但 li 不能设为 flex 或 grid，否则 ::marker 失效；它不继承 li 的 color，必须显式设置且不可省略值。
直接用 li::marker { color: #007bff; } 就能单独改序号颜色，但前提是 li 不能被改成 display: flex 或 display: grid，否则 ::marker 彻底失效。
为什么 color 写在 li 上不管用
很多人试过给 li 设 color: red，发现序号和文字一起变红——这没错，但根本不是“控制序号颜色”，只是靠继承碰巧生效。一旦你加了 li::marker { content: "→ " }，继承就断了，序号立刻回退成黑色。
真正可控的方式只有一条：必须显式写 li::marker { color: ... }，且值不能省略（inherit 不稳定，currentColor 可用但得确认父级 color 已定义）。
-
li::marker不继承li的color，哪怕结构完全标准 - 旧版 Safari（
- 如果用了
content自定义符号（比如"• "），color必须重写，不能依赖上下文
li::marker 失效的三个高频原因
不是代码写错，而是布局动了“底层契约”：
- 父元素是
ul或ol，但子元素用了div替代li—— 浏览器不认这是列表项，::marker直接忽略 -
li加了display: flex或display: grid—— 这会隐式取消display: list-item，序号消失，连带::marker失效 - 写了
ul::marker或ol::marker—— 伪元素只对li有效，套在容器上毫无作用
验证是否生效最简单的办法：临时加一句 li::marker { background: yellow; }，如果没反应，八成是 display 类型或元素类型错了。
嵌套列表里颜色怎么分层控制
多层 ol > li > ol > li 时，内层 li::marker 默认沿用外层样式，不是继承，而是“没被覆盖”。靠 revert 或 unset 基本不可靠，浏览器行为不一致。
安全做法是用更具体的选择器逐层覆盖：
ol li::marker { color: #2c3e50; }
ol ol li::marker { color: #7f8c8d; }
ol ol ol li::marker { color: #95a5a6; }
如果嵌套层级动态变化（比如 CMS 输出），建议给每层 ol 加 class，比如 <ol class="level-2"></ol>，再写 .level-2 li::marker，比依赖 DOM 深度更稳。
要加背景、圆角、缩放？::marker 不行，得换方案
li::marker 只响应 color、font-size、font-weight 等文本属性，不支持 background、border-radius、transform —— 这是规范限制，不是兼容性问题。
真要彩色圆圈数字、悬停放大、阴影等效果，必须关掉原生标记：
- 设
ol { list-style: none; counter-reset: item; } - 用
ol li::before { content: counter(item); counter-increment: item; }手动生成 - 此时
::before是普通伪元素，所有盒模型属性全可用
代价是：语义弱化（屏幕阅读器可能不识别为有序列表）、多行文本需额外处理缩进（display: flex 或 text-indent 配合 padding-left）。
最常被忽略的是 display 切换——加个 display: flex 救布局，结果序号没了，查半天才发现是 ::marker 被静默禁用。改色前，先盯住 li 的 display 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
