list-style-type仅更换列表标记而非添加样式，基础值如disc、decimal等全浏览器兼容，armenian等扩展值在IE9、Opera11及旧Safari中无效；ul默认disc、ol默认decimal，跨类型设置会被忽略；简写list-style顺序必须为type-position-image；动态修改需注意CSS优先级与DOM挂载时机。
list-style-type 用来控制 ul 和 ol 的标记样式，不是“加样式”，而是“换标记”——它不改变布局或颜色，只决定你看到的是 ●、○、■、1、a 还是 I。直接写在 CSS 规则里最稳妥，HTML 的 type 属性已过时且支持有限。
哪些值能用，哪些浏览器不认
基础值全浏览器通吃：disc（默认实心圆）、circle、square、decimal（123）、lower-alpha（abc）、upper-alpha（ABC）、lower-roman（i ii iii）、upper-roman（I II III）。
但以下值在 IE9、Opera 11 及部分旧版 Safari 中完全无效：armenian、cjk-ideographic、hiragana、katakana-iroha 等。如果项目需兼容老环境，别碰这些。
-
none是安全的，用来彻底隐藏标记（注意：它不移除缩进，要配padding-left: 0或margin-left: 0才真正“清空”） -
georgian和lower-greek在现代 Chrome/Firefox/Edge 中可用，但 Safari 15.4 之前不支持lower-greek
ul 和 ol 的默认值不同，别想当然
ul 默认是 disc，ol 默认是 decimal。如果你给 ol 设了 list-style-type: circle，浏览器会忽略——因为 circle 是无序列表专用值，有序列表不认它（会回退到 decimal）。
立即学习“前端免费学习笔记（深入）”；
反过来也一样：ol 能用的 upper-roman，套在 ul 上虽然不报错，但语义错乱，审查元素时可能被 DevTools 标为“无效声明”。
- 查兼容性最快方式：打开 DevTools → Elements 面板 → 选中
li→ 看 Styles 面板里该属性是否被划掉 - 真要混用（比如让
ul显示罗马数字），得先设display: block再手动用::before+counter()模拟，不能硬塞
用 list-style 简写时顺序不能错
list-style 是简写，必须按 list-style-type list-style-position list-style-image 顺序写。漏掉某个值会用默认值补，但顺序错会导致整个声明失效。
例如：ul { list-style: inside square; } 合法；ul { list-style: square inside; } 也合法（inside 自动识别为 list-style-position）；但写成 ul { list-style: inside url(arrow.png); } 就不行——缺了 type，浏览器无法推断该用什么标记，最终可能回退到 disc outside none。
- 图像路径出错时，浏览器不会报错，而是静默 fallback 到
list-style-type值（前提是它被显式写了） - 想确保图像一定显示？别用
list-style-image，改用background-image+padding-left模拟，兼容性高且可控
JavaScript 动态改 listStyleType 要注意 DOM 时机
用 JS 改 element.style.listStyleType = "square" 是有效的，但仅对行内样式起作用。如果 CSS 文件里写了更高级的选择器（如 ul.my-list li），JS 设置会被覆盖。
更隐蔽的问题：若列表是 JS 动态插入的（比如 innerHTML 注入），要等节点真实挂载到 DOM 后再改，否则 style 属性读写无效。
- 安全做法：
el.setAttribute("style", "list-style-type: square")比直接赋值style.listStyleType更可靠 - 批量操作？别循环每个
li，直接改父级ul或ol的样式规则，效率高且避免重排
真正难的不是选哪个值，而是当设计稿要求“带前缀的阿拉伯数字+点+空格”（如“1. ”）时，list-style-type: decimal 给不出那个点和空格——必须切到 counter() + ::before，这时候 list-style-type 反而要设成 none 才干净。
