最常见原因是浏览器不支持::marker伪元素，Chrome 86+、Firefox 68+、Safari 15.4+才支持；微信X5内核及iOS 15.2前Safari会静默忽略；另因list-style: none、display非list-item或list-style-image导致失效。
为什么 li::marker { color: red; } 没反应
最常见原因是浏览器根本不识别 ::marker——Chrome 86+、Firefox 68+、Safari 15.4+（即 macOS 12.3 / iOS 15.4 起）才支持；微信内置浏览器（X5 内核）、iOS 15.2 及更早 Safari 会静默忽略整条规则，不报错也不 fallback。
另一个高频原因是父容器被设了 list-style: none 或 ul 上用了 list-style-image，这会让 ::marker 失效。
还有就是 li 的 display 被覆盖成 block 或 inline，::marker 只对 display: list-item 生效。
li::marker 能改什么、不能改什么
::marker 支持的属性极窄，其他一律被浏览器静默丢弃：
✅ 允许：color、content（仅字符串或 counter(list-item)）、font 简写（如 font: bold 1.2em sans-serif）、text-align（仅对多字符 content 生效）、white-space
❌ 无效：margin、padding、background、border、transform、单独写的 font-family（必须包在 font 简写里）
⚠️ font-size 在 Chrome 100+/Firefox 98+ 才稳定生效，Safari 16.4 起才有限支持；别指望它像缩放图标一样可靠
怎么安全地用 content 替换圆点
content 是唯一能“换掉”默认圆点的方式，但语法极其敏感，错一个字符就全失效：
✅ 正确写法：li::marker { content: "• "; color: #555; font-size: 1.1em; }（注意空格在引号内、无多余符号）
❌ 错误写法：content: "•" ;（分号前有空格）、content: '•'（单引号可能被构建工具误删）、content: url(./dot.svg)（url() 完全不支持）
emoji 如 "→ " 在 Firefox 中宽度不均，建议加 font-size: 0.9em 微调对齐
想用图标字体（如 Font Awesome），得确保 font-family 正确加载且字符存在，例如：content: "★"; font-family: "Font Awesome 5 Free";
兼容性兜底必须用 list-style: none + li::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 方案会丢失语义和屏幕阅读器对列表结构的识别，仅用于视觉降级
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：当li 内容换行时，::marker 的对齐方式由 list-style-position 控制，而不是 margin 或 padding；想调符号和文字间距，得改 ul 的 padding-left 或 li 的 text-indent。 
