::marker 是专门用于设置列表项符号颜色和字体的伪元素，支持 color 和部分 font-* 属性，但不支持 background、border 等；Chrome 89+、Firefox 89+、Safari 15.4+ 支持，IE 不支持。
list-style-type 不能直接设颜色，得用 ::marker
列表项前面的符号（比如圆点、数字、字母）默认继承父元素的 color，但这个行为只对部分标记类型生效——比如 disc、circle 在 ul 中会变色，而 decimal 在 ol 中往往不变。真正可靠且可控的方式是使用 ::marker 伪元素，它是专门用来选中列表符号的。
注意：::marker 是 CSS Pseudo-Elements Level 4 的特性，Chrome 89+、Firefox 89+、Safari 15.4+ 支持；Edge 基于 Chromium 也支持。IE 完全不支持，别考虑兼容它。
::marker 能设置哪些样式？
它支持的 CSS 属性非常有限，主要是排版和颜色类，不是所有 color 相关属性都能用：
-
color：唯一稳定可用的颜色控制方式（包括rgba()、hsl()、变量等） -
font-*系列：如font-size、font-weight、font-family（但效果因浏览器而异，font-family基本无效） -
content：可覆盖默认符号，比如content: "→ "，但仅限字符串，不支持attr()或计数器函数 -
不支持：
background、border、padding、margin、transform、display
示例：让有序列表数字变红色，同时放大一点
立即学习“前端免费学习笔记（深入）”；
ol li::marker {
color: #e74c3c;
font-size: 1.2em;
}
为什么有时 ::marker 不生效？常见踩坑点
几个高频失效原因：
- 父容器设置了
color但没给li显式定义颜色，导致::marker继承了意外值（建议对li单独设color） - 用了不被支持的属性，比如写了
background-color: yellow，浏览器直接忽略整条规则（不会报错，但无效） - 在
ul中对li::marker设置font-weight: bold，结果无变化——因为disc符号本质是绘制图形，不是文本，加粗无效 - 用
content替换符号时忘了加空格或标点，导致数字/字母紧贴文字，比如content: "•"后没留空格，视觉上会粘连
替代方案：当 ::marker 不可用或不够用时怎么办？
如果要实现背景色、图标、SVG 或更复杂布局，::marker 就力不从心了。这时得退回到手动模拟：
- 移除原生列表样式：
list-style: none - 用
li::before生成内容，并自由控制样式（支持background、border-radius、transform等） - 有序列表需配合
counter，例如：
ol {
counter-reset: item;
}
ol li {
list-style: none;
}
ol li::before {
counter-increment: item;
content: counters(item, ".") ". ";
color: #27ae60;
font-weight: bold;
margin-right: 8px;
}
::marker 看似简单，但它的能力边界很窄，又容易被当成“万能列表符号控制器”。真要用好，得先确认你要改的是颜色还是形状，是单色还是渐变，是否需要响应式缩放——这些都会决定该坚持用 ::marker，还是早点切到 ::before + counter 这套更可控的组合。
