应使用 color 配合 list-style-type 让标记继承文字色，而非依赖不兼容的 ::marker；li 设置 color 即可改变内置标记颜色，兼容所有主流浏览器。
直接给 ::marker 设置 color 在部分浏览器（尤其是旧版 Safari 和某些版本的 Firefox）中确实不生效，这不是你写错了，而是 CSS 规范支持和浏览器实现存在差异。真正稳定、广泛兼容的方式是：**不依赖 ::marker 伪元素，改用 color 配合 list-style-type，让标记颜色自动继承父级文字色**。
✅ color 属性会控制标准标记的颜色
当使用内置的 list-style-type（如 disc、circle、square、decimal、lower-alpha 等）时，列表项前的标记默认继承 li 或其父容器的 color 值 —— 这是 CSS2.1 就定义的行为，兼容性极好。
- 只需给
li设置color: #ff6b6b;，圆点或数字就会变成对应颜色 - 无需写
::marker，也无需额外包裹 span - 适用于所有主流浏览器（Chrome、Firefox、Safari、Edge，包括 iOS Safari 14.5+）
⚠️ 为什么 ::marker + color 有时失效
::marker 是 CSS Pseudo-Elements Level 4 的新特性，虽然现代 Chrome/Edge 支持良好，但：
Money Knowledge
下载
金钱与财富知识助手。提供关于金钱的基本概念、理财知识、投资原则、财富思维等方面的内容。适用于：1) 了解金钱的基本知识；2) 学习理财和投资原则；3) 培养财富思维；4) 了解经济学基础概念。
- Safari 直到 15.4 才开始有限支持，且早期版本对
color不稳定 - Firefox 对
::marker的color支持较晚（约 Firefox 89+），且可能受list-style-position影响 - 若同时设置了
list-style-image，::marker会被忽略
? 替代方案：需要自定义形状时怎么办
如果必须用图标、特殊符号或背景图形，推荐更可控的方式：
立即学习“前端免费学习笔记（深入）”；
- 用
list-style: none;移除默认标记 - 用
li::before生成内容，配合color或background-color - 例如：
li::before { content: "•"; color: #4ecdc4; margin-right: 8px; } - 这样颜色完全由你控制，兼容性 100%，还能加动画、间距等
? 小技巧：统一控制多级列表颜色
如果页面有嵌套列表（如 ul > ul），可一层层设置 color：
-
ul { color: #333; }→ 一级标记灰色 -
ul ul { color: #5a67d8; }→ 二级标记紫色 - 子列表的
list-style-type标记会自动继承对应层级的 color
