list-style-image 用于以图像替换列表项标记，仅对 display: list-item 元素生效，不支持尺寸控制且路径需可访问；现代推荐用 ::marker 或 background-image + list-style: none 替代以获得更好兼容性与控制力。
用 list-style-image 设置图片标记
直接用 CSS 的 list-style-image 是最常用、最干净的方式，它会把图片作为 li 元素的项目符号渲染，位置和缩放由浏览器自动处理。
注意：该属性只对 display: list-item 的元素生效（默认就是 li），且不会影响列表内容本身布局。
- 图片路径必须可访问，推荐用相对路径或绝对 URL；
list-style-image: url(./icon-check.png); - 不支持设置图片大小，如果图片太大或太小，得提前在图像编辑工具里调整好尺寸，或者改用
background-image方案 - IE8+ 支持，现代浏览器全部支持，但 Safari 对 SVG 作为
list-style-image的渲染偶尔有对齐偏差
用 background-image 精确控制图标位置
当需要调整图标大小、间距、垂直对齐，或想让图标随文字颜色变化时，background-image 更灵活——本质是把 li 当成容器，手动定位图标。
关键点在于清除默认标记（list-style: none），再用 padding-left 留出图标空间，并用 background 定位。
- 必须加
list-style: none;，否则原生标记和背景图会同时出现 -
background-position常用left center或具体像素如4px 50%，避免依赖行高计算 - 用
background-size: contain或固定值（如16px 16px）控制图标尺寸，否则可能被拉伸或裁剪 - 示例：
li { list-style: none; padding-left: 24px; background: url(./arrow.svg) no-repeat left center; background-size: 12px; }
用 <img> 标签内联插入（不推荐但可行）
把 <img> 直接写在 li 开头，靠 vertical-align 对齐文字。这种方式语义弱、维护麻烦，仅适合极少数动态替换图标或需 JS 操作单个图标的情况。
-
<img>默认是 inline 元素，容易和文字基线错位，加vertical-align: middle或text-bottom通常更稳 - 图片加载失败时会显示 alt 文本或缺省图标，破坏视觉一致性，建议配合
onerror处理或预加载 - 响应式场景下，
width/height需设为em或rem单位，否则在缩放文字时图标大小不变 - 别忘了给
<img>加alt=""（空字符串），避免读屏软件重复播报“图片”
常见失效原因和兼容性注意点
图片标记不显示？大概率不是代码写错，而是路径、尺寸或 CSS 层叠顺序问题。
- 检查浏览器开发者工具中 Network 标签页，确认图片请求返回 200，而不是 404 或 CORS 错误
-
list-style-image在父级设置了list-style: none时会被覆盖，注意继承链 - Flex 或 Grid 布局下的
li可能丢失display: list-item，此时list-style-image失效，需显式声明 - SVG 图标若含内联样式（如 fill="black"），在暗色模式下可能不可见，建议用
fill="currentColor"继承文字颜色
真正麻烦的不是怎么写，而是不同浏览器对图标 baseline 的解释差异——尤其混合使用字体图标和图片标记时，对齐几乎总要微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
