list-style-type支持disc、circle、square（仅ul）、decimal、lower-roman、upper-alpha（仅ol）及none；需注意覆盖规则、display/float影响及::marker兼容性。
list-style-type 支持哪些值？别硬背，按场景选
list-style-type 控制的是 <ul></ul> 和 <ol></ol> 里每项前面的符号或编号样式。它不是万能的——比如你没法用它显示图标或自定义图片，那是 list-style-image 或 ::marker 的事。
常见可用值分三类：
-
disc（实心圆）、circle（空心圆）、square（实心方块）：只对<ul></ul>有效 -
decimal（1,2,3）、lower-roman（i, ii, iii）、upper-alpha（A, B, C）：只对<ol></ol>有效 -
none：彻底隐藏符号，但注意——这不会影响<li>的缩进，得配合padding-left: 0才真“干净”
为什么设置了 list-style-type 没生效？检查这三点
最常踩的坑不是写错值，而是被其他样式覆盖或结构干扰。
- 父元素用了
list-style: none（比如重置 CSS 库如 Normalize.css 默认对<ul></ul>设了这个），会直接干掉子级的list-style-type -
<li>里写了display: block或float: left，破坏了列表项默认的标记渲染流，list-style-type就失效 - 用了伪元素
::before手动插入内容，比如content: "• "，那原生的list-style-type就被视觉上掩盖了，实际还在，只是看不见
想换符号又不想改 HTML？用 CSS 变量 + 自定义属性更灵活
纯靠 list-style-type 值有限，且不支持 emoji 或任意字符。如果真要动态控制，推荐用 ::marker 配合 CSS 变量：
立即学习“前端免费学习笔记（深入）”；
ul.custom {
--marker: "→ ";
}
ul.custom li::marker {
content: var(--marker);
}
这样既能保持语义（还是 <ul></ul>），又能自由定义符号。注意：::marker 在 Safari 15.4+、Chrome 99+、Firefox 89+ 才稳定支持，老版本得回退到 list-style-image 或内联 <span></span>。
性能和可访问性提醒：别为了“好看”牺牲基础功能
list-style-type 本身没性能问题，但容易引发两个隐性风险：
- 用
list-style-image替代list-style-type加载图标时，图片失败会导致符号空白，且无法 fallback 到默认类型 - 屏幕阅读器依赖
<ol></ol>的list-style-type类型来播报序号逻辑（比如“第 3 项，罗马数字 iii”），改成::marker后若没同步设置aria-setsize/aria-posinset，读屏会丢失顺序信息 - 移动端小字号下，
lower-greek或hebrew这类复杂编号可能渲染模糊或乱码，优先选decimal或lower-alpha
符号是辅助信息，不是装饰。改之前先确认它是否还承担着结构或语义作用。
