::marker不生效主因是浏览器兼容性差（chrome86+/firefox89+/safari15.4+）或li设为flex/grid导致失效；推荐用list-style-type/list-style-image降级，或::before完全接管符号样式。
为什么 ::marker 样式不生效
最常见的原因是浏览器兼容性或父元素样式干扰。::marker 是 CSS Level 3 新增伪元素，Chrome 86+、Firefox 89+、Safari 15.4+ 才有较好支持；旧版本（尤其是 Safari ≤15.3）会直接忽略。另外，如果列表项（<li>）设置了 display: flex 或 display: grid，::marker 将失效——这是规范明确规定的：只有当 <li> 的 display 值为 list-item（默认值）时，::marker 才可渲染。
用 list-style-type + list-style-image 替代 ::marker
对兼容性要求高时，优先降级使用传统属性控制符号外观：
-
list-style-type支持disc、circle、square、decimal、lower-roman等内置类型，但无法调色或缩放 - 需要自定义图形（如 SVG 图标），用
list-style-image: url("data:image/svg+xml,...")，注意 base64 编码需 URL-safe，且部分老浏览器不支持 data URI 作为list-style-image - 必须配合
list-style-position: inside或outside调整符号位置，否则容易与文本重叠
用 ::before + content 完全接管符号
最可靠、最灵活的方案：禁用原生标记，用伪元素模拟。适用于所有现代浏览器，且可自由设置颜色、字体、大小、动画：
li {
list-style: none;
position: relative;
}
li::before {
content: "•";
color: #3b82f6;
font-size: 1.2em;
margin-right: 0.5em;
position: absolute;
left: -1.5em;
}
关键点：
立即学习“前端免费学习笔记（深入）”；
- 必须设
list-style: none彻底关闭原生符号 -
position: relative在<li>上是::before定位的前提 - 若用图标字体（如 Font Awesome），
content: "\f00c"需确保对应字体已加载并声明在font-family - 响应式场景下，
margin-left或left值建议用em或rem，避免像素固定偏移错位
通过类名区分不同列表的符号样式
不要给所有 <li> 写死样式，用语义化类名按需覆盖：
.list-check li::before { content: "✓"; color: #10b981; }
.list-arrow li::before { content: "→"; color: #8b5cf6; }
.list-dot li { list-style-type: none; }
.list-dot li::before { content: "·"; }
这样既保持 HTML 干净（不用每个 <li> 加 class），又避免全局污染。注意：如果某列表需混合符号（如第一项用 ✓、其余用 •），就得单独给那个 <li> 加类，::marker 本身不支持基于序号的差异化样式。
真正麻烦的是嵌套列表层级和 RTL 文本下的符号对齐——这时候 ::before 的 text-align 和 direction 继承逻辑比原生 ::marker 更难预测，得实测。
