::marker颜色未生效主因是父元素color继承或浏览器兼容性不足；仅chrome 108+、firefox 89+、safari 15.4+支持，且safari对flex/li包裹等场景静默忽略；它仅支持color、content、font-*等极少数属性，不支持大小、对齐或定位。
为什么::marker设了颜色却没生效
常见原因是父元素设置了 color，而 ::marker 默认继承该值——但如果你显式设置了 color 却仍无效，大概率是浏览器兼容性或列表项本身未触发 marker 渲染。Chrome 108+、Firefox 89+、Safari 15.4+ 支持 ::marker，但 Safari 对嵌套列表或 display: flex 的 li 会静默忽略它。确认是否在 ul 或 ol 的直接子 li 上使用；若 li 被包裹在 div 或设了 display: contents，::marker 就不会出现。
::marker 只能改颜色和内容，不能调大小或对齐
::marker 是个受限伪元素：支持的 CSS 属性极少，仅限 color、content、font-*（如 font-size）、text-transform 和部分 white-space 行为。不支持 margin、padding、position、vertical-align，也不能用 transform 移动符号位置。想让符号离文字更远？得靠 li::before + content 模拟，或者给 li 设 padding-inline-start 整体缩进。
用content替换默认符号时要注意计数逻辑
对有序列表 ol，::marker 的 content 可用 counter() 函数保持编号连续，但写法必须精确：
ol li::marker {
content: counter(list-item) ". ";
color: #3b82f6;
}
如果误写成 counter(ol) 或漏掉括号里的标识名，就会回退到默认数字，且颜色也不生效。无序列表 ul 不支持 counter()，只能用 Unicode 字符（如 "•"、"→"）或图片 url()，但图片无法上色，只能靠 filter: hue-rotate() 间接调色，且兼容性更差。
IE 和旧版 Edge 完全不支持::marker，降级方案要提前准备
如果项目需兼容 IE11 或 Edge 17–18，::marker 会直接被忽略，符号维持浏览器默认色。此时必须用后备方案：
- 给
li设list-style: none，再用li::before生成符号并控制颜色 - 用 SVG 内联图标替代，确保可填色且尺寸可控
- 避免依赖
::marker做关键视觉区分，比如错误提示的红点必须有其他文案或图标冗余表达
真正麻烦的不是写法，而是当设计师要求「圆点比文字小 2px、右对齐、悬停变粗」时，::marker 根本做不到——这时候就得坦白告诉对方：浏览器不给这个权限，得换方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
