li::marker { color: red; } 不生效是因为浏览器不支持、li 的 display 不是 list-item 或父级 ul 设了 list-style: none；color 是唯一稳定支持的属性，其他如 background、margin 等均无效。
直接写 li::marker { color: red; } 大概率没反应——不是语法错，而是三个前提至少崩了一个：浏览器不支持、li 的 display 不是 list-item，或父级 ul 被设了 list-style: none。
为什么 li::marker { color: red; } 完全不生效
它不是“写了就生效”的普通伪元素。浏览器只在满足全部三个条件时才创建并渲染 ::marker：
-
ul或ol没有设置list-style: none（设了就等于关掉整个通道，得改用list-style-type: disc或保留默认） -
li的计算display值必须是list-item（被flex/grid父容器影响、CSS-in-JS 覆盖、或手动设成block都会失效） - 浏览器版本达标：
Chrome 86+、Firefox 68+、Safari 15.4+（iOS 15.4 起），旧版 Safari（如 15.3）、微信 X5 内核、Android WebView 旧版本会静默忽略整条规则，DevTools 里都看不到::marker面板
color 是唯一真正稳的属性，其他全是高风险
::marker 受规范严格限制，超出白名单的声明会被浏览器静默丢弃（不报错、不警告、也不渲染）：
- ✅ 安全可用：
color（必支持，最稳）、font-size（Chrome 100+/Firefox 98+稳定，Safari 16.4+有限支持）、font简写（如font: bold 1.2em sans-serif） - ❌ 一律无效：
background、border、padding、margin、line-height、vertical-align、display、text-align（仅对多字符content+list-style-position: inside有效） - ⚠️ 小心使用：
font-weight在Safari 16.4+才支持；font-family单独写无效，必须包在font简写里
想兼容老环境？别硬刚 ::marker，先兜底再升级
只要目标环境含 iOS 15.3、Chrome 80 或 Android WebView 旧版本，::marker 就不能当唯一方案：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (::marker) { }包裹现代样式，避免污染老环境 - 降级写法必须包含两部分：
ul { list-style: none; padding-left: 0; }+li::before { content: "• "; color: #dc2626; margin-inline-start: 0.5em; } -
li::before方案里，调间距必须用margin-inline-start或padding-inline-start，::marker的margin和padding全部无效
最容易被忽略的一点：符号和文字之间的物理间距是硬编码的
即使 color 生效了，::marker 和文本之间的距离仍是 UA 样式写死的，::marker 自身无法控制，list-style-position 也动不了它——必须靠 text-indent、padding-left 或 li::before 的定位来间接调节。这个间隙在不同浏览器里还不一致，实测时建议用像素值微调。
