li::marker { color: red; }没反应主因是三个前提之一失效：浏览器不支持（Chrome 86+/Firefox 68+/Safari 15.4+）、li的display非list-item、或ul设了list-style: none；content语法极敏感，仅color/font-size等少数属性有效，间距需用padding-left/text-indent调整，老环境须降级为list-style: none + li::before。
为什么li::marker { color: red; }完全没反应
大概率不是代码写错，而是三个前提崩了一个：浏览器不支持、li的display不是list-item、或父级ul被设了list-style: none。Chrome 86+、Firefox 68+、Safari 15.4+（即 macOS 12.3 / iOS 15.4 起）才真正识别::marker；微信 X5 内核、iOS 15.2 及更早 Safari 会静默忽略整条规则，DevTools 里都看不到::marker面板。另外，ul上写了list-style: none就等于关掉了::marker的渲染通道——得改成list-style-type: disc才能让它介入。
content怎么写才不翻车
content是唯一能“换掉”圆点的出口，但语法极其敏感，错一个字符就失效：
- ✅ 正确：
content: "• ";（注意引号内末尾有空格，且用双引号） - ❌ 错误：
content: "•" ;（分号前多空格）、content: '•'（单引号在某些构建工具中被删）、content: url(./dot.svg)（url()完全不支持） - 推荐用 Unicode 编码避免粘连或字体缺失：
content: "\2022";（实心圆）、content: "\27A4";（右箭头） - emoji 如
"→ "在 Firefox 中宽度不均，可加font-size: 0.9em微调对齐
::marker能设什么、不能设什么
它不是普通伪元素，浏览器只放行极窄的属性子集，其他一律静默丢弃（不报错，也不生效）：
- ✅ 安全可用：
color（最稳）、font-size（Chrome 100+/Firefox 98+ 稳定，Safari 16.4+ 有限支持）、font简写（如font: bold 1.2em sans-serif）、text-align（仅对多字符content生效） - ❌ 一律无效：
margin、padding、background、border、transform、display、line-height - ⚠️ 小心使用：
font-weight在 Safari 16.4+ 才支持；font-family单独写无效，必须包在font简写里
兼容老环境必须降级到list-none + ::before
只要项目需支持 iOS 16 或 Android WebView 旧版本，::marker就不能当唯一方案：
立即学习“前端免费学习笔记（深入）”；
- 先用
@supports (::marker) { }包裹现代样式，避免污染老环境 - 降级写法：
ul { list-style: none; padding-left: 0; }+li::before { content: "• "; color: #555; margin-right: 0.5em; display: inline-block; width: 1em; } - ⚠️ 注意：
li::before方案会丢失语义和屏幕阅读器对列表结构的识别，仅用于视觉层覆盖 - 想调圆点和文字间距？别碰
::marker的margin——改ul的padding-left或li的text-indent
li内容换行时，::marker的对齐方式由list-style-position控制（outside vs inside），而这个属性本身在::marker里不可设。 
