截至2026年9月，li::marker { color: red; } 稳定支持 color 的浏览器为 chrome/edge 86+、firefox 68+、safari 15.4+（含 ios safari 15.4+）；旧版如 chrome 80、safari 14、所有 ie 均静默忽略。
能改，但只在较新浏览器中生效，且仅限 color、font-size 等极少数属性；写对了没反应，大概率是浏览器不支持或被其他样式覆盖。
哪些浏览器真正支持 li::marker { color: red; }
截至 2026 年 9 月，稳定支持 color 的环境包括：
- Chrome / Edge 86+
- Firefox 68+
- Safari 15.4+（注意：iOS Safari 15.4 之前完全不识别
::marker）
旧版 Chrome（如 80）、Safari 14、所有 IE 版本——::marker 被静默忽略，控制台无报错，样式也不渲染。你在 iPhone 上测试没反应？先查系统版本和 Safari 版本。
li::marker { color: ... } 没生效的三大常见原因
不是代码写错了，而是这些隐藏条件没满足：
-
li元素未触发display: list-item—— 比如父容器用了display: flex或显式写了display: block，::marker就不会生成 - 设置了
list-style-image—— 它会彻底接管标记区域，::marker规则直接被跳过 - 父级（如
ol或ul）已有高优先级color声明（例如 Chrome UA 样式里的color: -internal-light-dark(black, white)），你的li::marker选择器权重不够，需用ol li::marker或加!important
::marker 只能用哪些 CSS 属性？
它不是普通伪元素，规范强制限制可用属性。目前真正生效的只有：
-
color（必支持，最稳） -
font-size、font-weight、font-family（Chromium/Firefox 稳定，Safari 15.4+ 起支持） -
content（仅限counter()或纯字符串，如content: "→ "；混合写法如"第" counter(item) "条"在 Safari 中大概率失效）
以下写法全部无效，且浏览器不报错、不警告：
-
background、border、padding、margin -
text-align、line-height、vertical-align -
display（设成inline-flex也会被忽略）
想兼容老浏览器或做深度定制？别硬刚 ::marker
当目标环境包含 iOS Safari ::marker 就不是解法。可靠路径是：
- 先关掉原生符号：
li { list-style: none; } - 用
li::before插入内容：content: "•"; color: #dc2626; - 手动控制位置：
position: absolute; left: 0;或margin-inline-start: 0.5em; - 若需响应式缩放，用
font-size: 0.8em;而非固定px
符号与文字之间的间距无法通过 margin 或 gap 调整——这是浏览器 UA 样式硬编码的距离，::marker 和 marker 属性都动不了它，只有 ::before 配合 position 或 padding-inline-start 才可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
