li::marker 颜色字号不生效是因浏览器支持滞后，Chrome 110+/Firefox 117+ 才开始支持，Safari 至今不支持；可靠方案是 list-style: none + li::before 自定义符号。
li::marker 为什么设不了颜色或字号
因为 li::marker 在多数浏览器里长期不支持 color 和 font-size，不是你写错了，是规范落地慢。Chrome 110+、Firefox 117+ 才开始逐步支持，Safari 目前（2024）仍完全不支持 color 和 font-size 对 ::marker 的影响。
常见错误现象：li::marker { color: red; font-size: 14px; } 在 Safari 里完全无效，在旧版 Chrome/Firefox 里也静默失败。
- 必须检查目标浏览器版本，不能只看 Can I Use 上的“支持”就默认可用
-
::marker支持的样式非常有限：目前仅content、color（Chrome/Firefox 新版）、font-family（部分生效）、unicode-bidi等极少数属性 - 想改颜色/大小，实际更可靠的方式是绕过
::marker，用list-style: none+ 自定义::before
用 ::before 替代 ::marker 实现可控符号样式
这是当前兼容性最好、控制最自由的做法：去掉原生标记，用伪元素手动插入并样式化内容。
使用场景：需要统一修改所有 li 符号颜色、大小、间距，或使用图标/特殊字符（如 ▸、•、→）。
立即学习“前端免费学习笔记（深入）”；
li {
list-style: none;
position: relative;
}
li::before {
content: "•";
color: #ff6b6b;
font-size: 18px;
margin-right: 8px;
line-height: 1;
}
-
position: relative是必须的，否则::before可能错位 -
content中若用 Unicode 字符（如"▸"），注意字体是否支持，必要时加font-family: system-ui, sans-serif; - 垂直对齐靠
line-height或vertical-align: middle（配合display: inline-block）微调，别依赖默认基线 - 响应式中字号变化时，
margin-right建议用em或rem，避免符号和文字间距断裂
有序列表（ol）里怎么让数字变色变大
ol li::marker 同样受制于浏览器支持，尤其数字颜色在 Safari 里至今不可控。直接操作 ::marker 风险高，推荐用 counter + ::before。
ol {
counter-reset: item;
list-style: none;
}
ol li {
counter-increment: item;
}
ol li::before {
content: counters(item, ".") ". ";
color: #2a5dc9;
font-size: 16px;
font-weight: 600;
margin-right: 6px;
}
-
counters(item, ".")用于嵌套序号（如1.1），单层用counter(item)即可 - 末尾的
". "是手动加的分隔符，注意空格——不然数字会紧贴文字 - 如果
ol有start属性（如<ol start="5">），counter-reset和counter-increment依然自动适配，无需额外处理 - 不要给
ol设padding-left后又忘掉调整::before的margin-left，容易造成整体缩进错乱
为什么不用 background-image 模拟列表符号
虽然可行，但实际维护成本高、灵活性差，属于过时方案，现在基本没必要用。
性能与兼容性影响：每个 li 都要计算背景位置，缩放/换色需换图；RTL（从右向左）语言下符号位置难对齐；无法随字体大小自动缩放。
-
background-image的符号是位图时，高清屏下会模糊；是 SVG 时又得单独维护文件路径和尺寸 - 当列表项内含多行文本，
background-position很难精准锚定到首行基线，常出现上下偏移 - 无障碍方面，
background-image的符号不会被读屏器识别，而::marker和counter方案至少保留语义结构
真正复杂的是符号和文字的 baseline 对齐逻辑，不是选哪个 API，而是理解浏览器怎么渲染行内盒子——这点很多人调半天才发现是 line-height 和 vertical-align 在捣鬼。
