17370845950

应使用 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 支持良好，但：

• 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