::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; } 去染色——图片标记无法被着色。
推荐组合方式：
- 想微调默认符号 → 用
list-style-type+::marker { color: ...; font-size: ...; } - 想彻底替换符号形态 → 用
::marker { content: ...; }+list-style: none - 想用图标但又要可着色 → 放弃
list-style-image，改用伪元素 +background-image或内联 SVG
兼容性差时的降级方案怎么写？
目前全球约 85% 的用户环境支持基础 ::marker（color + content），但旧版 Safari 和所有 IE 完全不支持。不能只靠 @supports 判断，因为它的检测粒度太粗（例如 @supports (content: "") 在 Safari 15.4+ 返回 true，但实际不支持 content 里的 counter()）。
更务实的写法：
- 先写通用 fallback：
li { list-style-type: disc; } - 再用
@supports selector(::marker)包裹增强样式（注意：这是目前最准的检测方式） - 对关键视觉差异（如圆点变箭头），在
@supports块内用list-style: none+::marker，并在外面保留原始声明 - 若项目需支持 iOS 15.2 以下设备，直接放弃
::marker，统一用li::before模拟标记
复杂点在于：不同浏览器对同一属性的支持程度不一致，比如 font-size 可用，但 font-variant-numeric 就不行。别指望一套 CSS 通吃，得按具体需求做最小化适配。
