li::marker仅支持color、font-size等文本样式，无法修改形状、背景、边框或缩放；需用list-style:none+li::before+counter()实现复杂效果，且注意Safari及微信浏览器兼容性问题。
直接说结论：用 li::marker 可以改颜色和基础字体样式，但改不了形状（比如圆圈、方块）、加背景、设边框或缩放——这些都超出它的能力范围。
为什么 li::marker 不能改“形状”
::marker 不是画布，它只负责“渲染已生成的标记”，而这个标记的形状由 list-style-type（如 decimal、disc）或浏览器默认逻辑决定。你不能用 border-radius 把数字变圆角，也不能用 background 给它套个色块——这些属性在 ::marker 上完全被忽略，连报错都不会有。
常见误操作包括：
- 写
li::marker { background: #007bff; border-radius: 50%; }→ 无效，浏览器静默丢弃 - 写
li::marker { display: inline-flex; }→ 直接让整个伪元素失效 - 试图用
content: "●"替换ol的数字 → 会丢掉计数逻辑，所有项都显示同一个符号
li::marker 真正能安全控制的属性
它只响应极少数文本类属性，且行为因浏览器略有差异：
立即学习“前端免费学习笔记（深入）”；
-
color：稳定可用，支持rgba()、hsl()、CSS 变量（如var(--accent)） -
font-size、font-weight、font-family：前两者基本可靠；font-family对数字/字母影响微弱，对符号（如disc）基本无效 -
content：仅限字符串或counter()函数调用，不能嵌套attr()或其他函数 -
text-align：部分浏览器支持（如 Chrome），Safari 表现不一致，慎用
示例：给有序列表加括号并染色
ol li::marker {
content: "(" counter(list-item) ") ";
color: #e74c3c;
font-weight: 600;
}
想实现彩色圆圈数字？必须关掉原生序号
一旦需求超出 color 和 font-size，就得放弃 ::marker，转用 list-style: none + li::before + counter() 的组合方案：
-
list-style: none是前提，否则新旧序号会重叠 -
counter-reset和counter-increment控制计数逻辑 -
li::before可自由设置background、border-radius、transform、margin等 - 多行文本对齐问题需额外处理：用
display: flex或position: absolute配合padding-left，否则第二行会顶到最左边
关键点：这个方案兼容性好（IE11 都能跑），但语义上仍是标准 ol/li，无障碍支持不受损。
容易被忽略的兼容性断层
::marker 在 Safari 15.4+ 才开始支持，而 iOS 16 及更早系统自带 Safari 版本普遍低于此线；微信内置浏览器（X5 内核）至今不识别该伪元素。这意味着：
- 如果项目要覆盖国内移动端用户，
::marker不能作为唯一实现 - 别指望用
@supports (selector(li::marker))完美降级——部分旧版 Safari 会错误地声明支持但实际不生效 - 最稳妥的写法是：先写
li::marker样式，再在同一选择器下叠加list-style: none+li::before规则（用!important或更高优先级确保兜底）
