list-style-type 不生效的根本原因是元素 display 值不是 list-item；只有 display: list-item（如默认 li）才触发该属性解析，div/span 等需显式设置才能显示序号。
list-style-type 不生效？检查 display 类型是否为 list-item
很多情况下 list-style-type 看似写了却没反应，根本原因是元素没被浏览器当“列表项”对待。只有 display: list-item（默认 <li> 的值）才触发该属性解析。
常见错误现象：div 或 span 里手动加 list-style-type: square，但序号完全不显示。
- 确保父容器是
ul或ol，且子元素是li（或显式设display: list-item） - 避免对
li设置display: block或flex—— 这会切断序号渲染链 - 若用伪元素模拟列表，
list-style-type无效，得用::before手动插入符号
自定义图标用 list-style-image，但优先级和尺寸容易失控
list-style-image 能直接指定图片作为项目符号，但它不接受尺寸控制，也不支持多图适配，实际表现常不如预期。
使用场景：需要统一小图标（如箭头、勾选）替代默认圆点，且不希望写太多伪元素代码。
立即学习“前端免费学习笔记（深入）”；
- 图片路径必须可访问，404 时会回退到
list-style-type（如果设置了） - 图片大小由原始文件决定，无法用 CSS 缩放；建议导出为 12×12 或 16×16 px 的透明 PNG
- 在高 DPI 屏幕上可能模糊，此时应改用 SVG 或字体图标 +
::before - IE 8 及更早版本不支持该属性，需降级方案
list-style 简写覆盖顺序很关键：type、position、image 不能颠倒
list-style 是简写属性，三个值的顺序固定：list-style-type、list-style-position、list-style-image。写错顺序会导致部分值被忽略。
常见错误现象：写了 list-style: inside url(arrow.svg) disc，结果图标没出来，序号还跑到了文字右边。
- 正确顺序示例：
list-style: disc inside url(arrow.svg) - 任意一项留空就用默认值（
disc/outside/none），但不能省略位置占位，比如list-style: url(x.png) disc会被当成type image解析而失败 - 如果只设其中一两个值，推荐分开写，避免隐式覆盖 —— 尤其团队协作时
兼容性陷阱：Firefox 对 list-style-position: inside 的行高处理最保守
list-style-position: inside 让序号进入内容区域，在 Chrome 和 Safari 中通常能随文字自动对齐，但 Firefox 会严格按 line-height 和字体度量计算位置，导致序号“下沉”或与文字错位。
性能影响不大，但视觉一致性差，尤其在响应式排版中容易暴露。
- 测试时务必在 Firefox 中打开开发者工具，检查
li的盒模型是否被序号撑开 - 稳妥做法是放弃
inside，改用outside+ 左侧 padding 模拟内嵌效果 - 若必须用
inside，建议配合vertical-align: middle或微调line-height（如1.2）缓解
真正难的不是记住语法，而是当序号突然消失或错位时，能快速判断是 display 类型断了、简写顺序错了、还是 Firefox 在悄悄重算 baseline。
