::marker 样式支持极有限，仅 color、content、部分 font-* 属性有效，各浏览器差异大；content 可替换符号但不支持图片；list-style 与 ::marker 可共存但有优先级；兼容性差时需用 @supports selector(::marker) 检测并降级。
为什么 ::marker 设置颜色或字体无效？
常见现象是写了 li::marker { color: red; font-family: "Arial"; } 却没生效，尤其在 Firefox 中完全不认 font-family，Chrome/Safari 也只支持有限属性。根本原因是：浏览器对 ::marker 的样式支持极保守——目前仅允许 color、content、font-*（部分）、text-align（仅部分场景）等极少数属性，且各引擎差异大。比如 font-weight 在 Safari 16.4+ 才开始支持，font-size 在 Chrome 110+ 才稳定可用。
实操建议：
- 优先用
color控制符号颜色，这是最稳妥的 - 避免依赖
font-family改变符号字形，它在多数浏览器中被忽略 - 如需精确控制字号，用
font-size并确认目标浏览器版本 ≥ Chrome 110 / Safari 16.4 / Firefox 115+ - 不要给
::marker设display、margin、padding或background，这些一律无效
用 content 替换默认符号是否可靠？
content 是 ::marker 唯一能彻底接管符号内容的属性，但它有硬限制：只能接受字符串、counter() 函数或 attr()（极少适用），不能嵌入 HTML 或图片。例如 li::marker { content: "→ "; } 可行，但 content: url(arrow.svg) 会直接失效。
使用场景和注意点：
立即学习“前端免费学习笔记（深入）”；
- 纯文本符号（如
"•"、"» "、"[1] "）最安全 - 用
counter()可实现自定义编号逻辑，例如content: "[" counter(list-item) "] "; - 若列表是
ol且想跳过默认数字，必须同时设list-style: none，否则原数字和content会叠加显示 - Firefox 对
content中 Unicode 符号的支持略弱于 WebKit，测试时务必覆盖
::marker 和 list-style 能否共存？
可以共存，但行为有隐式优先级：当 ::marker 中设置了 content，它会完全覆盖 list-style-type 和 list-style-image；若未设 content，则 list-style 仍生效，::marker 仅负责修饰（如调色）。这意味着你不能一边用 list-style-image，一边又用 ::marker { color: blue; } 去染色——图片标记无法被着色。
