::marker 在旧版浏览器（chrome 86/firefox 80/safari 15.4 前）被静默忽略，无报错；list-style-type + color 是全兼容方案，符号继承 li 的 color；自定义符号需 ::marker + content，不支持则用 li::before 模拟。
::marker 在旧版浏览器里根本不会被解析，不是写法错，是压根不认这个语法；list-style-type 才是兼容所有主流浏览器的稳妥方案。
为什么 ::marker 写了却没反应
Chrome 86 之前、Firefox 80 之前、Safari 15.4 之前（包括 iOS Safari 15.3 及更早）对 ::marker 是静默忽略——DevTools 里看不到该伪元素，控制台也无报错。你写的 li::marker { color: red; } 在 iPhone 上毫无变化，就是这个原因。不是选择器权重不够，也不是属性写错了，是浏览器 CSS 解析器直接跳过整条规则。
- 用
getComputedStyle(document.querySelector('li'), '::marker').content在控制台验证：返回"none"或空字符串，说明不支持 - 某些 Electron 内核（如 VS Code 1.7x、老版微信内置浏览器）也完全不识别
::marker -
::marker还会被父级display: flex或display: grid干扰——只要li不是display: list-item，它就失效
list-style-type + color 是最稳的颜色控制方式
标准 list-style-type（如 disc、decimal、lower-roman）的符号默认继承 li 的 color 值，这是 CSS2.1 就定义的行为，从 IE6 到 iOS Safari 14.5 全都支持。
- 只需写
li { color: #3b82f6; list-style-type: disc; }，圆点就会变蓝 - 不用
::marker，也不用!important，没有兼容性风险 - 如果同时设了
list-style-image，会覆盖color继承，此时颜色控制失效
list-style-type 的局限和绕过方法
list-style-type 只支持预设关键字，不能直接设 "→" 或 "★"；但你可以用 ::marker { content: "→ " } 显式替换，前提是目标环境支持 ::marker。
- 以下写法无效：
ul { list-style-type: "→"; }—— 浏览器会回退到默认disc - 想用 emoji 或自定义字符，必须配合
::marker和content，且要加空格保证文字间距：li::marker { content: "✓ "; } - 若需兼容 Safari 15.3 以下，只能放弃
list-style-type和::marker，改用list-style: none+li::before模拟
真正容易被忽略的关键点
符号与文字之间的水平间距，无论是 ::marker 还是 list-style-type，都由浏览器 UA 样式硬编码决定，无法用 margin、gap 或 text-indent 精确调整。设计稿要求「圆点紧贴文字」或「数字右对齐」时，别在 ::marker 上死磕，直接上 li::before + position: absolute + 手动 left 微调——这才是能落地的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
