::marker 设置颜色或字体无效，通常因父级 list-style: none 抑制了原生标记；仅当 list-style-type 为 decimal 等有效值时 ::marker 才生效，且仅继承 color、font 相关属性，不支持 margin、padding 或位移。
为什么 ::marker 设置颜色或字体无效？
常见现象是给 li::marker 加了 color: red 或 font-weight: bold 却没反应——大概率因为父级 ol 或 ul 上设置了 list-style: none，或者用了自定义 list-style-type: none。只有浏览器原生生成的标记（如 decimal、lower-alpha）才触发 ::marker 伪元素。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认列表项未被
list-style: none抑制，且list-style-type是有效值（如decimal、upper-roman） -
::marker只继承部分属性：支持color、font相关（font-size、font-family）、content（可覆盖数字/符号），但不支持margin、padding、display - 若需完全控制外观，改用
list-style: none+counter-increment+content: counter(...)手动注入更可靠
::marker 能不能把数字往右挪一点？
不能直接用 margin-left 或 transform 移动 ::marker——它没有盒模型，也不响应位移类属性。所谓“位置”，实际由 text-align 和 direction 在行内隐式对齐，且受 list-style-position 控制（inside / outside）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
list-style-position: inside时，::marker和文本同在li内容流中，可通过padding-left或text-indent间接调整视觉间距 -
list-style-position: outside（默认）时，标记位于li左侧外边距区，无法用 CSS 精确偏移；此时若要右移数字，只能用counter方案并配合position: relative定位 - 注意：Firefox 对
::marker的content支持较晚（v68+），旧版需降级处理
用 counter 替代 ::marker 的最小可行写法
当样式或定位需求超出 ::marker 能力范围（比如加背景、圆角、绝对定位数字），counter 是更可控的选择，且兼容性更好（IE8+）。
实操示例：
ol {
counter-reset: item;
list-style: none;
}
ol li {
counter-increment: item;
}
ol li::before {
content: counter(item) ".";
color: #2563eb;
font-weight: 600;
margin-right: 0.5em;
display: inline-block;
width: 1.5em;
text-align: right;
}
关键点：
-
counter-reset必须设在列表容器（ol或ul）上，不能只写在li上 -
::before的content中用counter(item)获取计数，加引号会变成字符串字面量 - 用
inline-block+width+text-align: right可让数字右对齐并预留固定宽度，避免多数字时错位
移动端 Safari 对 ::marker 的兼容陷阱
iOS 14.5+ 才开始支持 ::marker，且早期版本（≤15.4）不支持 content 替换或 font-size 缩放。如果项目需兼容 iOS 14–15.3，::marker 几乎不可用。
判断方式：
- 用
@supports selector(li::marker)做特性检测，而非依赖 UA 字符串 - 真机测试比模拟器更可靠——Safari 技术预览版常比正式版提前支持
- 若必须用原生标记，至少保留
color和font-family作为基础样式，其他增强交由counter回退
复杂点在于：::marker 看似简洁，但浏览器实现碎片化严重；真正需要微调位置或叠加效果时，手写 counter 反而省去一堆兼容性补丁。
