CSS list-style-image 语法
在 CSS 中，list-style-image 属性用于定义列表项图片，也就是使用图片来代替列表项符号。
语法：
list-style-image: none或url(图片路径);说明：
list-style-image 的默认值为 none，也就是不使用图片代替列表项符号。
对于 list-style-image 属性，小伙伴们要清楚以下几点。
- list-style-image 属性通常应用于列表容器元素（ul 或 ol），其值会被其内部的 li 元素继承。也可以直接应用于 li 元素。
- 如果为列表同时设置了 list-style-image 和 list-style-type，浏览器会优先显示图片。当图片加载失败时，会自动回退显示 list-style-type 定义的符号。
CSS list-style-image 摘要
| 属于 | CSS 列表 |
|---|---|
| 使用频率 | 低 |
| 是否继承 | 是 |
| 默认值 | none |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS list-style-image 示例
接下来，我们通过一个简单的例子来讲解一下 CSS list-style-image 属性是如何使用的。
示例：list-style-image 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ol {
list-style-image: url("imgs/flower.svg");
}
</style>
</head>
<body>
<ol>
<li>Python</li>
<li>C++</li>
<li>Java</li>
<li>Go</li>
<li>Rust</li>
</ol>
</body>
</html>页面效果如下图所示。
分析：
list-style-image 属性实际上就是把列表项符号改为一张图片，而引用一张图片就要给出图片的路径。
提示: 在现代 Web 开发中，list-style-image 的使用较少，推荐两种方法：（1）使用伪元素 ::marker；（2）使用字体图标。
