safari 15.4 前不支持 ::marker，旧版 ios safari、electron 内核等完全忽略；全兼容方案是用 list-style-type 配合 color 继承，自定义符号需降级为 li::before，符号间距必须用绝对定位微调。

为什么 Safari 里 ::marker 写了没反应

不是你选择器写错，也不是权重不够，是 Safari 15.4 之前压根不解析 ::marker 这个语法——DevTools 里看不到该伪元素，getComputedStyle(el, '::marker').content 返回 "none" 或空字符串，就是最直接的证据。iOS Safari 15.3 及更早、部分 Electron 内核（如老版 VS Code、微信内置浏览器）也完全忽略它。你写的 li::marker { color: red; } 在 iPhone 上静默失效，属于兼容性断层，不是 bug。

list-style-type + color 是唯一全兼容方案

标准 list-style-type（如 disc、decimal、lower-roman）的符号默认继承 li 的 color 值，这是 CSS2.1 就定义的行为，从 IE6 到 iOS Safari 14.5 全都支持。只要确保 li 是 display: list-item（默认值），就不用碰 ::marker：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• li { color: #3b82f6; list-style-type: disc; } → 圆点立刻变蓝
• 嵌套列表可分层控制：ul ul { color: #8b5cf6; } → 二级标记自动变紫
• 若同时设了 list-style-image，会覆盖 color 继承，此时颜色控制失效

想用自定义符号（如 →、✓）但又要兼容 Safari 15.3 以下

list-style-type 不支持字符串值，ul { list-style-type: "→"; } 会直接回退到 disc。而 ::marker { content: "→ "; } 在旧 Safari 里又不生效。此时必须放弃原生标记系统，改用降级方案：

• 先清除默认：li { list-style: none; }
• 用 li::before 模拟符号：li::before { content: "→ "; color: #3a86ff; margin-inline-end: 0.3em; }
• 多行文本对齐更稳：给 li 设 display: flex; align-items: flex-start;，再让 ::before flex: none;
• 避免用全角符号（如 "•"），优先选 Unicode：content: "\2022";

真正容易被忽略的关键点：符号与文字间距无法用 CSS 精确控制

无论是 ::marker 还是 list-style-type，符号和文字之间的水平间距由浏览器 UA 样式硬编码决定，margin、text-indent、gap 都无效。设计稿要求「圆点紧贴文字」或「数字右对齐」时，别在 ::marker 上死磕。直接上 li::before + position: absolute + 手动 left 微调——这才是能落地的解法。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！