::marker 样式生效需三前提：浏览器支持（Chrome 86+/Firefox 68+/Safari 15.4+）、li 的 display 为 list-item、ul 未设 list-style: none；否则静默失效，仅 color、font-size 等极少数属性可用，兼容旧环境须用 @supports + ::before 降级。
li::marker { color: red; } 没反应，先检查这三个前提
不是代码写错了，而是 ::marker 根本没被浏览器渲染——它需要同时满足：浏览器支持（Chrome 86+ / Firefox 68+ / Safari 15.4+）、li 的计算 display 值必须是 list-item、父级 ul 不能设 list-style: none。只要崩一个，整条规则就静默失效，DevTools 里都看不到 ::marker 面板。
常见翻车点：
-
ul上写了list-style: none→ 改成list-style-type: disc才能激活::marker -
li被父容器display: flex影响，或被 CSS-in-JS 覆盖了display→ 强制加display: list-item - 项目需兼容 iOS 16 或微信 X5 内核 →
::marker直接忽略，必须降级
content: "• " 是唯一能换掉圆点的出口，空格不能少
::marker 的 content 只接受字符串字面量、counter() 或 counters()，不支持 url()、attr()、HTML 片段或拼接表达式。写错一个字符，符号就回退到默认圆点。
安全写法：
立即学习“前端免费学习笔记（深入）”；
- 用 Unicode 编码替代易错字符：
content: "\2022";（实心圆）、content: "\27A4";（右箭头） - 末尾带空格：
content: "• ";（双引号内，空格在引号里） - 避免 emoji：
content: "→ "在 Firefox 中宽度不均，建议加font-size: 0.9em微调 - 别用单引号：
'•'在某些构建工具中会被误删
能设的样式极少，别碰 margin/padding/background
::marker 不是普通伪元素，浏览器只放行极窄的属性子集，其他一律静默丢弃（不报错，也不生效）。
✅ 安全可用：
-
color（最稳，始终生效） -
font-size（Chrome 100+/Firefox 98+ 稳定，Safari 16.4+ 有限支持） -
font简写（如font: bold 1.2em sans-serif），单独写font-family会失效 -
text-align（仅对多字符content生效）
❌ 一律无效：
-
margin、padding、background、border、transform、display、line-height、vertical-align
想调圆点和文字间距？改 ul 的 padding-left 或 text-indent，别碰 ::marker 的 margin。
兼容老环境必须用 list-none + ::before 回退
只要项目要支持 iOS 16、Android WebView 旧版本或微信 X5，就不能把 ::marker 当唯一方案。现代写法和降级方案得共存：
先用 @supports (::marker) { } 包裹新样式，避免污染老环境；再写降级：
ul {
list-style: none;
padding-left: 0;
}
ul li::before {
content: "• ";
color: #555;
margin-right: 0.5em;
display: inline-block;
width: 1em;
vertical-align: text-bottom;
}
⚠️ 注意：li::before 方案里，vertical-align: text-bottom 是关键，否则基线对不齐；width: 1em 控制水平占位，防止文字换行错位。
真正复杂的地方不在怎么写，而在判断什么时候该放弃 ::marker —— 它不是“升级”，而是“有条件启用”。你得先知道用户在哪跑，再决定要不要留那条回退路径。
