::marker{color:red}无效的根源是渲染通道被掐断，需同时满足：list-style-type未禁用、li为list-item显示、浏览器支持（chrome86+/firefox68+/safari15.4+）。
直接设 color 是最稳的，但前提是浏览器支持且 DOM 状态没崩——否则它根本不会渲染 ::marker，连报错都没有。
为什么 li::marker { color: red; } 没反应
不是代码写错了，而是 ::marker 渲染通道被掐断了。三个条件缺一不可：
-
ul或ol不能设list-style: none（得保留list-style-type，比如disc或decimal） -
li的计算后display值必须是list-item（被flex、grid父容器影响或 CSS-in-JS 覆盖时会失效） - 目标浏览器必须支持：Chrome 86+ / Firefox 68+ / Safari 15.4+（iOS 15.4+，微信 X5 内核、Android WebView 旧版直接忽略）
DevTools 里看不到 ::marker 面板？说明它压根没被解析，不是样式被覆盖。
color 生效但颜色不对，可能是继承或权重问题
color 属性本身稳定，但容易被父级干扰：
- 如果
ul或li上写了color: #333，::marker会继承它——加!important或提高选择器权重，比如ul > li::marker - 某些 UA 样式（如 Chrome 默认
ul的color）优先级高于你的规则，需显式覆盖 - 用了
list-style-image？它会完全屏蔽::marker的作用域
content 换符号时，color 才真正可控
只改颜色不换内容，有时不如直接换符号再统一上色。注意 content 极度敏感：
- 必须用双引号：
content: "• ";（末尾空格不能少，否则 Safari 可能回退默认圆点） - 推荐 Unicode 编码：
content: "\2022";（实心圆）、content: "\27A4";（右箭头），避免字体缺失或 emoji 宽度不均 - 单引号
'•'在部分构建工具中会被误删；url()、attr()、HTML 片段全不支持 - 换完符号后，
color就只作用于这个字符，不再受列表文本影响，更可控
想兼容 iOS 16 或微信环境？别只靠 ::marker
只要项目需支持旧内核，::marker 就不能当唯一方案：
- 用
@supports (::marker) { }包裹现代写法，老环境自动跳过 - 降级方案必须关掉原生标记：
ul { list-style: none; padding-left: 0; }+li::before { content: "• "; color: red; margin-right: 0.5em; display: inline-block; width: 1em; } - 注意：
li::before方案里，margin和width是调间距的关键，而::marker里这些属性一律无效
真正容易被忽略的是：哪怕所有代码都对，只要用户在 iOS 15.3 的 Safari 里打开，::marker 就是静默不存在的——它不报错、不警告、不 fallback，只当那行 CSS 从来没写过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
