CSS list-style-type 语法
在 CSS 中，list-style-type 属性用于列表（包括无序列表和有序列表）的列表项符号。
语法：
list-style-type: 关键字;说明：
对于无序列表（ul 元素）来说，它的 list-style-type 属性常用取值如下表所示。
| 取值 | 说明 |
|---|---|
| disc（默认值） | 实心圆● |
| circle | 空心圆○ |
| square | 正方形■ |
对于有序列表（ol 元素）来说，它的 list-style-type 属性常用取值如下表所示。
| 取值 | 说明 |
|---|---|
| decimal（默认值） | 1、2、3… |
| lower-roman | 小写罗马数字：i、ii、iii… |
| upper-roman | 大写罗马数字：I、II、III… |
| lower-alpha | 小写英文字母：a、b、c… |
| upper-alpha | 大写英文字母：A、B、C… |
对于 list-style-type 属性，我们要清楚以下 2 点。
- list-style-type 属性通常应用于列表元素（ul 或 ol），其值会被其内部的 li 元素继承。也可以直接应用于 li 元素。
- 如果同时设置了 list-style-image，则优先显示图片。当图片加载失败（或被禁用）时，浏览器会回退显示 list-style-type 设置的符号。
提示: list-style-type 属性取值是非常复杂的，上面只是列举常用取值。想要查看所有取值情况，请查看下方的 MDN 文档。
CSS list-style-type 摘要
| 属于 | CSS 列表 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 是 |
| 默认值 | disc 或 decimal |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS list-style-type 示例
接下来，我们通过几个简单的例子来讲解一下 CSS list-style-type 属性是如何使用的。
示例 1：无序列表使用 list-style-type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style-type: disc;
}
</style>
</head>
<body>
<ul>
<li>Python</li>
<li>C++</li>
<li>Java</li>
<li>Go</li>
<li>Rust</li>
</ul>
</body>
</html>页面效果如下图所示。
分析：
如果改为 list-style-type: circle;，此时页面效果如下图所示。
如果改为 list-style-type: square;，此时页面效果如下图所示。
示例 2：有序列表使用 list-style-type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ol {
list-style-type: decimal;
}
</style>
</head>
<body>
<ol>
<li>Python</li>
<li>C++</li>
<li>Java</li>
<li>Go</li>
<li>Rust</li>
</ol>
</body>
</html>页面效果如下图所示。
分析：
如果改为 list-style-type: lower-roman;，此时页面效果如下图所示。
当然了，小伙伴们也可以尝试一下其他取值，然后看看实际效果是怎样的。
示例 3：list-style-type: none; 去除列表项符号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li>Python</li>
<li>C++</li>
<li>Java</li>
<li>Go</li>
<li>Rust</li>
</ul>
</body>
</html>页面效果如下图所示。
分析：
使用 list-style-type: none; 可以去除列表项符号，在创建自定义列表样式或将列表用作导航时非常有用。
示例 4：list-style-type 使用字符串作为标记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style-type: "→ "; /* 使用箭头符号作为标记 */
}
</style>
</head>
<body>
<ul>
<li>Python</li>
<li>C++</li>
<li>Java</li>
<li>Go</li>
<li>Rust</li>
</ul>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用一个字符串 "→ " 作为列表项的标记。如果浏览器支持，则每个列表项前面都会显示一个箭头和后面的空格。
