CSS list-style 语法
在 CSS 中，list-style 属性用于定义列表项的样式。list-style 是一个复合属性，它是以下 3 个属性的简写。
语法：
list-style: type image position;说明：
type 是 list-style-type 属性的值，image 是 list-style-image 属性的值，而 position 是 list-style-position 属性的值。
list-style 的 3 个值顺序可以任意打乱，比如 list-style: inside square; 也是可行的，浏览器会自动识别。但为了代码可读性，我们建议保持 type image position 的顺序。”
注意: 并不推荐使用 list-style 这个复合属性，而是推荐按照开发需要单独使用 list-style-type、list-style-image、list-style-position 子属性。
CSS list-style 摘要
| 属于 | CSS 列表 |
|---|---|
| 使用频率 | 低 |
| 是否继承 | 是 |
| 默认值 | 使用子属性的默认值 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS list-style 示例
接下来，我们通过一个简单的例子来讲解一下 CSS list-style 属性是如何使用的。
示例：list-style 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
width: 150px;
background-color: skyblue;
list-style: square inside;
}
</style>
</head>
<body>
<ul>
<li>绿叶网 - 为好教程，全力以赴</li>
<li>绿叶网 - 为好教程，全力以赴</li>
<li>绿叶网 - 为好教程，全力以赴</li>
<li>绿叶网 - 为好教程，全力以赴</li>
<li>绿叶网 - 为好教程，全力以赴</li>
</ul>
</body>
</html>页面效果如下图所示。
分析：
list-style: square inside; 等价于以下代码：
list-style-type: square;
list-style-image: none;
list-style-position: inside;