list-style-type支持disc、circle、square、decimal、lower-alpha、upper-alpha、lower-roman、upper-roman、none等值，其中disc/circle/square/decimal/lower-alpha/upper-roman跨浏览器稳定；armenian/georgian等多语言值兼容性差，常回退为decimal。
list-style-type 支持哪些值？哪些其实不实用
list-style-type 能设的值不少，但真正稳定、跨浏览器可用的其实就那么几个。disc、circle、square 在所有现代浏览器里表现一致；decimal、lower-alpha、upper-roman 也基本没问题。但像 georgian、armenian 这类，Chrome 和 Safari 渲染结果可能不同，Firefox 甚至直接回退成 decimal；none 倒是可靠，但它只是“去掉”，不算“自定义点”。别指望靠它实现图标或颜色变化——它只控制符号类型，不支持样式微调。
想用图标当列表点？别只改 list-style-type
纯靠 list-style-type 实现自定义图标（比如 ✅ 或 →）行不通：它不接受 Unicode 字符串或图片路径。常见错误是写成 list-style-type: "→"，这会直接被忽略，浏览器照常显示圆点。真要图标，得用 ::marker 伪元素（仅 Chromium 和 Firefox 109+ 支持），或者更通用的方案：list-style: none + ::before + content。例如：
li {
list-style: none;
}
li::before {
content: "→ ";
margin-right: 8px;
color: #007bff;
}
注意两点：一是 content 里的空格不能少，否则文字紧贴图标；二是 ::before 默认是 inline，若需垂直对齐，得加 vertical-align: middle 或设 display: inline-block。
list-style-type 和 list-style 简写冲突怎么破
很多人先写 list-style-type: square，再写 list-style: none，结果发现圆点没了——因为 list-style 是简写属性，会覆盖之前所有单设的 list-style-* 值。顺序和覆盖关系很关键：
立即学习“前端免费学习笔记（深入）”；
- 后写的
list-style会清掉前面的list-style-type、list-style-position、list-style-image - 如果只想改类型又保留位置（比如
inside），要么全用简写：list-style: square inside，要么确保list-style不出现 - 调试时可查 computed 样式，看最终生效的是哪条声明
移动端缩放时圆点错位？检查 list-style-position
在 iOS Safari 或某些安卓浏览器里，list-style-position: outside（默认值）下，小字号列表项缩放后可能出现圆点悬空、与文字不对齐。这不是 bug，是 outside 把符号放在行框外，而缩放改变了行高计算。解决办法很简单：
- 显式设
list-style-position: inside，让符号进内容区，对齐更稳 - 或者放弃
list-style-type，用background-image+padding-left模拟点，完全可控 - 避免在
rem或vw尺寸下依赖outside的默认留白，那部分空白不随字体缩放线性变化
真正麻烦的不是怎么加点，而是加完之后在各种缩放、字体设置、嵌套列表场景下是否还稳得住——这些细节往往要到真机测试时才暴露。
