list-style-type 不生效是因为仅对 display: list-item 生效；改用 ::marker 可精细控制符号，但需确保元素为 list-item 且兼容性受限，旧浏览器需 fallback。
list-style-type 不生效？先确认 display 类型是否支持
很多情况下 list-style-type 看似失效，其实只是元素没被浏览器识别为“真正的列表项”。<li> 元素默认是 display: list-item，但一旦被设为 display: flex、display: grid 或 display: block，符号就会消失——这不是 bug，是规范行为。
-
list-style-type只对display: list-item生效；其他 display 值会直接忽略该属性 - 若需在 flex 容器中保留符号，别改
<li>的 display，而是用ul或ol包裹，并确保其display仍为block - 自定义符号更稳妥的方式是放弃
list-style-type，改用::marker（见下一条）
::marker 伪元素怎么写才真正起作用
::marker 是目前唯一能精细控制符号颜色、字体、间距甚至内容的原生方式，但它有明确限制：只作用于 display: list-item 的元素，且不能脱离列表上下文独立存在。
- 必须写成
li::marker或ol li::marker，不能写成div::marker（无效） - 支持的样式有限：
color、font相关属性（font-family、font-size）、content（仅接受字符串或counter()函数） -
content中用counter(list-item, decimal)可复现默认数字，但注意：不同浏览器对counter()的支持略有差异，Safari 15.4+ 才稳定支持自定义counter-style - 示例：
li::marker { content: "→ "; color: #3a86ff; font-family: system-ui; }
用 ::marker 替换符号时 content 值的常见错误
很多人以为 content: "•" 就能替换圆点，结果发现符号错位、缩进异常或根本没显示——问题往往出在 content 的语义和渲染逻辑上。
-
content值不是“插入字符”，而是“生成一个 marker 盒”，它自带默认 inline 行为和基线对齐，直接写"•"会导致与文本基线不一致 - 避免用全角符号（如
"•"、"—"），优先用 Unicode 字符如\2022（bullet）或\27A4（arrow right），更可控 - 若需调整符号和文字间距，不要加空格（
"→ "易受字体影响），改用margin-inline-start或padding-inline-start控制 - 错误写法：
li::marker { content: "• "; }正确写法：li::marker { content: "\2022"; margin-inline-end: 0.3em; }
兼容性差的场景：旧浏览器或 WebKit 内核怎么办
::marker 在 Chrome 89+、Firefox 86+、Edge 89+ 支持良好，但 Safari 15.4 之前完全不支持，部分安卓 WebView 也滞后。真要兼容，得有 fallback 方案。
立即学习“前端免费学习笔记（深入）”；
- 不要用
@supports (::marker)做检测——它在不支持的浏览器里会直接跳过整个规则块，导致无符号 - 推荐写法：先写传统
list-style-type，再用::marker覆盖，利用层叠优先级自然降级 - 若必须支持 iOS 14 或更早，只能回归 background-image + padding 模拟，或 JS 注入
<span class="marker"></span>，但要注意语义丢失和可访问性影响 - 特别注意：用
list-style: none+::before模拟时，::before默认是display: inline，无法像::marker那样自动参与列表缩进计算，容易破坏对齐
::marker 的 content 值和排版行为绑定太紧——它不是装饰性伪元素，而是语义化标记的一部分。改了 content 就等于重定义了列表项的“计数/标记”本质，稍不注意就会让屏幕阅读器读错，或者在打印样式里崩掉缩进。 
