list-style-type 失效主因是 display: flex/grid 剥离 ::marker；需改用 li::marker { content: "•"; color: #ff6b6b; } 显式控制符号、颜色与间距，并重置 list-style: none。
为什么 list-style-type 设了但符号没变？
常见原因是父元素或列表项设置了 display: flex 或 display: grid，导致 ::marker 被剥离或失效。原生 ul/ol 在这些 display 模式下会丢失默认 marker 渲染机制，list-style-type 彻底不生效。
- 检查
li或其父容器是否意外加了display: flex（比如为了居中文字） - 用浏览器开发者工具查看
::marker是否被渲染 —— 若在 Elements 面板里完全看不到该伪元素，基本就是 display 模式冲突 - 临时移除
display样式验证：如果恢复为display: list-item（默认值），符号立刻出现，就可确认问题根源
::marker 无法响应 color 的真实原因
::marker 默认继承父级 color，但某些浏览器（尤其是 Safari 15.4–16.3 和旧版 Chrome）对继承行为支持不一致；更关键的是，如果 li 上显式设置了 color，而 ::marker 又没单独声明 color，部分引擎会忽略继承链。
- 必须显式给
::marker设置color，不能只靠继承：li::marker { color: #ff6b6b; } - 避免在
li上用color: inherit或color: currentColor干扰传递 - Safari 中若 marker 颜色仍异常，尝试加
content强制重置：li::marker { content: "•"; color: #ff6b6b; }
用 list-style-type 改符号却无效的兼容性陷阱
list-style-type 对自定义字符（如 "→"、"★"）完全不支持 —— 它只认标准关键字（disc、square、decimal 等）。想用图标或特殊符号，必须放弃 list-style-type，改用 ::marker { content: "..." }。
- 以下写法无效：
ul { list-style-type: "→"; } - 正确替代方案：
ul li::marker { content: "→ "; } - 注意空格：若
content末尾没加空格，文字会紧贴符号；但加多了又可能影响对齐，建议用margin-inline-end控制间距更稳妥
真正可控且兼容的方案：::marker + content + 显式样式
这是目前唯一能稳定控制符号形状、颜色、大小、间距的方式，且现代浏览器（Chrome 89+、Firefox 82+、Safari 15.4+）均已支持。关键点是彻底绕过 list-style-type，用 CSS 伪元素接管渲染。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
li::marker { content: "•"; color: #4a5568; font-size: 1.2em; margin-inline-end: 0.5em; } - 支持 Unicode 图标：
li::marker { content: "?"; } - 如需不同层级用不同符号，可用属性选择器：
li[data-level="2"]::marker { content: "◦"; }
别忘了重置原生样式：ul, ol { list-style: none; padding-inline-start: 0; } —— 否则 ::marker 和原生 marker 可能叠加显示。
