::marker设color无效主因是浏览器兼容性（safari 15.4+、chrome 89+、firefox 80+才支持）及属性限制（仅color、font-*、content可用），list-style-image或flex/grid布局会使其失效；降级用li::before模拟最可靠。
为什么 ::marker 设置颜色没生效
直接写 li::marker { color: red; } 在部分浏览器（尤其是旧版 Safari 或 Chrome 89 之前）会无效，因为 ::marker 的样式能力有限：它只接受少数 CSS 属性，color 是其中之一，但前提是列表项没有被 list-style 覆盖为图片或自定义内容，且父元素未强制继承或重置。
常见失效场景包括：ul 或 ol 上设置了 list-style: none、用了 list-style-image、或在 Flex/Grid 容器中子项脱离了默认列表流。
- 确保
li保持原生渲染流，不要对父ul/ol设display: flex等布局覆盖 - 避免同时设置
list-style-type和list-style-image—— 后者会完全接管符号，::marker失效 - Chrome 89+、Firefox 80+、Safari 15.4+ 支持
color；Safari 15.0–15.3 仅支持content，不支持color
::marker 可用的样式属性有哪些
::marker 不是通用伪元素，它只暴露一组极简样式接口。目前稳定支持的仅有：
-
color：控制符号颜色（对disc、circle、square、数字、字母等内置类型有效） -
font-*系列（如font-size、font-family）：影响符号文字类标记（如decimal、lower-alpha）的字体表现 -
content：可完全替换符号（例如content: "→ ";），此时color仍作用于新内容 -
text-align、margin、padding等布局属性一律不生效
注意：font-size 对图形符号（如 disc）无缩放效果，仅影响字符型标记；若需缩放圆点，得用 transform: scale() 作用于整个 li，再单独重置文本。
兼容性 fallback 方案怎么写
当目标环境包含 Safari 15.0–15.3 或更老版本时，::marker { color: ... } 会被忽略，必须降级处理。最可靠的方式是放弃 ::marker，改用 list-style: none + ::before 模拟：
li {
list-style: none;
position: relative;
}
li::before {
content: "•";
color: #e74c3c;
font-size: 1.2em;
position: absolute;
left: -1.5em;
}
这个方案的问题在于：需手动管理 ol 的计数逻辑（可用 counter-increment + counter() 实现），且无法自动适配 RTL 文本方向。如果项目已用 PostCSS 或构建流程，可借助 autoprefixer（目前不支持 ::marker 前缀），所以 fallback 必须手写。
修改有序列表数字颜色的特殊注意点
对 ol 使用 ::marker 时，color 会同时影响数字和后续的分隔符（如英文句点、括号）。例如：
ol li::marker {
color: #3498db;
}
结果是 “1. ”、“2. ” 中的 “1”、“2” 和 “.” 全部变蓝。如果只想染数字、保留默认标点色，目前无纯 CSS 解法 —— ::marker 不支持子元素选择或分段样式。唯一办法是用 content 拆解：
ol {
counter-reset: item;
}
ol li {
list-style: none;
}
ol li::before {
counter-increment: item;
content: counters(item, ".") " ";
color: #3498db;
}
ol li::after {
content: "";
/* 分隔符只能靠空格或额外伪元素模拟，无法独立上色 */
}
这意味着：真要精确控制数字与标点的颜色分离，就得放弃语义化 ol，或接受 JS 动态注入 span 包裹数字 —— 这恰恰是 ::marker 想避免的复杂度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
