::marker不能直接写color或font-size就生效，是因为其样式能力被规范严格限制：仅支持content、color、font相关属性及少量text-*属性，margin/padding/background等全部无效；且font-size在旧版Safari中支持滞后，Chrome100+/Firefox98+才稳定支持，Safari16.4起有限支持。
为什么 ::marker 不能直接写 color 或 font-size 就生效
因为 ::marker 的样式能力被严格限制：只支持 content、color、font 相关属性（如 font-family、font-weight）、text-align（仅对 list-style-position: inside 有效），以及 white-space。像 margin、padding、background、transform 全部无效——这不是浏览器 bug，是规范明确禁止的。
常见错误是试图用 ::marker { background: red; } 给圆点加背景，结果毫无反应；或写 font-size: 1.2em 却发现符号大小没变——这是因为 font-size 在部分浏览器（如旧版 Safari）中尚未完全支持，且它只影响符号本身的“字体度量”，不等价于缩放图形。
- Chrome 100+ 和 Firefox 98+ 支持
font-size对::marker生效，但 Safari 直到 16.4 才开始有限支持 - 若需可靠缩放，应改用
content配合 Unicode 字符或 SVG data URL，并用font-size控制其渲染尺寸 -
color始终可用，且会同时影响符号颜色和继承自父元素的字体颜色（如果content是文本）
用 content 替换默认圆点时要注意哪些字符和编码问题
::marker 的 content 只接受字符串、attr() 或 counter()，不支持图片 URL（url() 无效）。想显示图标，只能靠 Unicode 字符或内联 SVG（通过 data:image/svg+xml 编码）。
常见踩坑点：直接复制粘贴 emoji（如 ●、»）可能因字体缺失导致回退成方块；用 counter() 生成编号时，list-style-type 必须设为 none，否则原生计数器和 counter() 会冲突。
立即学习“前端免费学习笔记（深入）”；
- 推荐使用稳定显示的 Unicode 字符：
content: "•";（U+2022）、content: "→";（U+2192）、content: "▸";（U+25B8） - 避免用
content: "★";这类装饰性 emoji，移动端某些系统字体不包含该字形 - 要用 SVG 图标？必须 URL 编码：
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4' fill='%233b82f6'/%3E%3C/svg%3E");
list-style-position: inside 和 outside 对 ::marker 布局的影响
list-style-position 决定了 ::marker 的定位基准，直接影响你能怎么对齐和留白。设为 inside 时，::marker 成为 <li> 内容流的一部分，此时 text-align 才对它起作用；设为 outside（默认），::marker 在行框外侧，text-align 完全无效，且无法用 margin-left 等常规方式微调水平位置。
- 想让符号左对齐、文字缩进？用
list-style-position: inside+text-align: left，再配合padding-left控制文字起始位置 - 想保持传统布局（符号在内容左侧空白区）但又需要精确控制符号距离？只能靠
margin-inline-start调整整个<li>，或用transform: translateX()搞 hack（不推荐） -
list-style-position: inside下，若<li>内有块级元素，符号可能被挤到顶部，需额外设vertical-align: top或用 flex 布局重排
兼容性差的场景下如何安全降级
IE 完全不支持 ::marker，Safari 15.6 及更早版本只支持 content 和 color，且不支持 counter()。这意味着不能把交互逻辑或关键视觉依赖它。
真正实用的降级策略不是“优雅降级”，而是“渐进增强”：先用传统 list-style-type 和 list-style-image 写基础样式，再用 @supports 包裹 ::marker 规则。这样老浏览器照常显示默认圆点，新浏览器才启用自定义。
- 写法示例：
@supports (selector(::marker)) { li::marker { content: "◆"; color: #2563eb; } } - 别用
@supports not (::marker)做兜底——not在部分浏览器中解析异常，优先用正向检测 - 若项目必须支持 Safari 14，建议放弃
::marker，改用background-image+padding-left模拟，或用伪元素::before手动插入符号（需额外 HTML 结构或 JS 注入）
最麻烦的其实是多层嵌套列表——每个层级的 ::marker 都要单独写，且 counter() 嵌套容易出错。这种时候，真不如用 CSS 自定义属性配合 JS 动态生成 content，反而更可控。
