::marker 伪元素可单独控制列表序号颜色，但需确保 li 元素且 display 为 list-item（非 flex/grid），chrome 86+、firefox 68+、safari 15.4+ 支持；自定义 content 时 color 不继承，须显式设置；嵌套列表需用层级选择器分别控制。
list-style-type 无法直接控制 ::marker 颜色
用 list-style-type 设置序号类型（如 decimal、lower-alpha）后，序号颜色会跟随 color 属性——但这是个陷阱：它同时影响文字内容，没法单独染色序号。
真正能分离控制的，只有 ::marker 伪元素。不过得注意兼容性：Chrome 86+、Firefox 68+、Safari 15.4+ 支持；旧版 Safari 和 IE 完全不认。
给 ::marker 设置 color 必须配合 display: list-item
很多情况下 ::marker 不生效，根本原因是父元素没被浏览器识别为“可标记列表项”。哪怕用了 ul/ol，如果子元素是 div 或加了 display: block，序号就丢了。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 确保列表项是
li元素（或显式设display: list-item） -
li不能有display: flex/display: grid—— 这会让::marker失效 - 颜色设置必须写在
li::marker上，不是ul::marker或ol::marker
正确示例：
li {
color: #333; /* 文字颜色 */
}
li::marker {
color: #007bff; /* 仅序号变蓝 */
}自定义 marker 内容时 color 不继承
一旦用 content 覆盖默认序号（比如 li::marker { content: "→ " }），color 就不会自动继承父级 color，必须显式声明。
常见错误现象：::marker 变成黑色，不管外面怎么设 color。
解决方式：
- 始终为
li::marker单独写color - 避免用
inherit，直接写具体值或currentColor -
content中的符号（如"•"、"▶"）算文本，受font-size和line-height影响，但不响应font-weight
安全写法：
li::marker {
content: "• ";
color: currentColor; /* 显式继承，别省 */
font-size: 1em;
}嵌套列表中 ::marker 的层级与重置
多层嵌套（ol > li > ol > li）时，内层 ::marker 默认沿用外层样式，容易颜色混掉、编号错乱。
关键点：
- 每层
ol或ul的type属性（如type="a"）仍有效，但只影响content生成逻辑，不影响::marker样式继承 - 必须用更具体的选择器重置内层，比如
ol ol li::marker或加 class - 不要依赖
revert或unset，它们在::marker上行为不稳定
推荐做法是主动分层控制：
ol li::marker { color: #2c3e50; }
ol ol li::marker { color: #7f8c8d; }
ol ol ol li::marker { color: #95a5a6; }最常被忽略的是 display 类型切换对 ::marker 的隐式破坏——加个 display: flex 救布局，结果序号消失，还查不出原因。盯住 li 的 display 值，比调 color 更优先。
