能，li::marker伪元素可改编号颜色，但仅限chrome 86+、firefox 81+、safari 15.4+；旧版safari和ie不支持，且不可用::before模拟以免破坏语义与可访问性。
li::marker 伪元素能改编号颜色吗
能，但仅限现代浏览器（Chrome 86+、Firefox 81+、Safari 15.4+），旧版 Safari 和 IE 完全不支持。别试 ::before 模拟编号再上色——那不是真编号，会破坏语义和可访问性。
怎么用 li::marker 设置颜色
直接在 li 上写 li::marker 规则，用 color 控制编号颜色，注意它不继承父级 color，必须显式设置：
li {
color: #333; /* 文本色 */
}
li::marker {
color: #007bff; /* 编号色，独立生效 */
}-
li::marker只对有序列表（ol）和无序列表（ul）的li有效，对dl或自定义元素无效 - 不能用
font-size单独缩放编号大小，得靠content+counter()手动重建（见下条） - 不支持背景、边框、阴影等盒模型属性，只响应
color、font-*和部分文本相关属性
需要改编号大小或样式怎么办
一旦要超出 color 和字体粗细的控制范围（比如让数字变大、加背景圆圈），li::marker 就不够用了。此时必须关掉默认编号，用 counter() + ::before 重建：
ol {
list-style: none;
counter-reset: item;
}
ol li {
counter-increment: item;
}
ol li::before {
content: counters(item, ".") ". ";
color: #e74c3c;
font-weight: bold;
margin-right: 8px;
}- 关掉原生编号用
list-style: none，否则新旧编号会重叠 -
counters(item, ".")支持多层嵌套编号（如1.1），单层用counter(item) - 手动生成的编号是普通文本，可以自由加
background、border-radius、transform等
兼容性差时的兜底方案
如果项目必须支持老 Safari 或微信内置浏览器（X5 内核），li::marker 基本等于不可用。稳妥做法是统一用 counter() 方案，并补上降级样式：
立即学习“前端免费学习笔记（深入）”；
/* 兜底：所有浏览器都走这里 */
ol {
list-style: decimal; /* 原生编号作为 fallback */
}
@supports (display: block) and (not (li::marker)) {
ol {
list-style: none;
}
ol li::before {
/* counter 方案启用 */
}
}- 别依赖
@supports selector(li::marker)—— 目前只有 Chrome 支持该语法，Firefox/Safari 不认 - 真实项目里更常用特征检测库（如 Modernizr）或 UA 判断，但简单场景直接上
counter()更省心 - 注意：用
counter()后，屏幕阅读器仍能正确读出编号顺序，前提是保持ol > li结构不变
真正麻烦的不是写法，而是得同时考虑语义完整性、屏幕阅读器行为、打印样式和老浏览器表现——改个颜色背后，其实是在调整个渲染链路的兼容边界。
