::marker 在旧版 Safari 和部分 Electron 内核中不生效，因仅 Chrome 86+、Firefox 80+、Safari 15.4+ 稳定支持；需用 getComputedStyle 验证，不支持时应改用 list-style: none + ::before 模拟。
为什么 ::marker 在某些浏览器里完全不生效
因为 ::marker 是 CSS Level 3 的伪元素，Chrome 86+、Firefox 80+、Safari 15.4+ 才开始稳定支持，旧版 Safari（尤其是 iOS 15.2 之前）和部分 Electron 内核（如 VS Code 1.7x）会直接忽略它。不是写法错，是压根没解析。
实操建议：
- 先用
getComputedStyle(document.querySelector('li'), '::marker').content在控制台验证是否被识别（返回none或空字符串说明不支持） - 若需兼容，放弃纯 CSS 方案，改用
list-style: none+::before模拟符号 - 避免在
::marker中使用display、margin等受限属性——它只接受content、color、font相关属性和少量text-*
list-style-type 和 ::marker 能不能一起用
能，但行为有优先级：如果 list-style-type 设为 disc，而 ::marker 又设了 content: "→"，最终显示的是 →；但若 ::marker 没写 content，则回退到 list-style-type 的值。关键点在于 content 是否显式声明。
常见误区：
-
::marker { color: red; }有效，但::marker { font-size: 18px; }在 Safari 15.4–16.3 里会被忽略（已知 bug） -
list-style-position: inside对::marker无影响——它的定位由 UA 样式决定，无法用left/transform调整 - 想让符号右对齐？别碰
::marker，改用direction: rtl+list-style-position: outside组合模拟
用 ::before 替代 ::marker 时怎么对齐才不飘
原生 ::marker 的 baseline 对齐逻辑是黑盒，::before 必须手动模拟。最稳的方式是用 flex 容器替代默认列表流，把符号当独立元素处理。
实操要点：
- 给
li设display: flex; align-items: flex-start;，再用::before { flex: none; margin-right: 8px; } - 避免用
vertical-align: middle—— 文字行高变化时极易错位 - 符号字体要选等宽或带 baseline 控制的（比如
font-family: 'Symbols'或 SVGdata:URL），否则不同字号下上下浮动明显 - 如果列表项含多行文本，
::before的margin-top要配合line-height计算，不如直接用padding-left配合背景图稳妥
类名控制不同列表的符号样式为何失效
因为 ::marker 不继承父元素的 class，也不能用属性选择器直接绑定（如 li[data-type="arrow"]::marker 是合法的，但 li.arrow::marker 在 Safari 16.1 之前不工作）。真正可靠的是靠结构区分或 data 属性驱动。
推荐做法：
- 用
ol[data-style="roman"]或ul[data-bullet="star"]这类 data 属性做钩子，比 class 更可控 - 避免嵌套列表中混用多种符号——父
ul的::marker会污染子li，需用ul ul::marker单独重置 - 若用 CSS-in-JS（如 Emotion），确保
::marker规则没被自动 hash 或 scope 掉——它必须出现在全局样式层
真正麻烦的不是怎么写样式，而是判断当前环境到底支不支持 ::marker 的完整能力。上线前务必在目标终端真机截图对比，光看 CanIUse 的绿色勾不够——有些“支持”只是部分属性可用。
