使用::marker伪元素可单独修改列表标记颜色，如li::marker{color:red;}，文字颜色不变，支持有序和无序列表，兼容现代浏览器；也可结合list-style-image使用彩色图标，或用list-style:none配合::before自定义标记内容与样式，实现灵活控制。
想单独修改列表标记的颜色，而不影响列表文本颜色？利用 list-style 配合 ::marker 伪元素，可以轻松实现。传统方法难以分离项目符号和文字颜色，但现代CSS提供了更精细的控制方式。
使用 ::marker 伪元素直接改色
这是最直接的方法。每个列表项前的标记（如圆点、数字）可通过 ::marker 选择器单独设置样式。
- 支持有序和无序列表
- 仅改变标记外观，不干扰文本布局
- 兼容主流现代浏览器（Chrome, Firefox, Safari, Edge）
示例代码：
li::marker {
color: red;
}
这样，所有 li 的项目符号或编号会变成红色，而列表文字保持原有颜色。
结合 list-style-image 实现彩色图标
如果默认符号不够用，可以用图片代替。通过 list-style-image 引入彩色图标，实现更丰富的视觉效果。
注意：图片颜色由图像本身决定，无法用CSS再调色，适合固定色彩需求。
示例：
ul {
list-style-image: url('custom-bullet.png');
}
确保图片尺寸适中，避免布局错位。也可用SVG内联以支持动态着色。
自定义标记内容与颜色（进阶技巧）
若需完全控制标记样式，可取消默认标记，用 ::before 模拟，并自由设色。
步骤如下：
- 将 list-style 设为 none，隐藏原标记
- 用 ::before 添加自定义内容（如伪元素字符或计数器）
- 为 ::before 单独设置颜色、大小等样式
示例代码：
ol {
list-style: none;
counter-reset: item;
}
li {
counter-increment: item;
}
li::before {
content: counter(item) ".";
color: blue;
margin-right: 8px;
font-weight: bold;
}
这种方法灵活性最高，适用于复杂设计场景。
基本上就这些。优先推荐 ::marker，简洁高效；有特殊需求时再考虑伪元素替代方案。不复杂但容易忽略细节。
