语法
list-style: list-style-type list-style-position list-style-image | initial | inherit;
列表样式属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.example1 {
list-style: circle;
}
.example2 {
list-style: square inside;
}
</style>
</head>
<body>
List 1
<ul class="example1">
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
</ul>
List 2
<ul class="example2">
<li>List Item A</li>
<li>List Item B</li>
<li>List Item C</li>
</ul>
</body>
</html>
指定列表类型的列表样式属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ul:nth-of-type(1) {
list-style: lower-greek;
}
ul:nth-of-type(2) {
list-style: lower-latin;
}
</style>
</head>
<body>
<h2>List-style 属性示例</h2>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</body>
</html>
指定列表位置的列表样式属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.inside {
list-style: inside;
}
.outside {
list-style: outside;
}
li {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>List-style 属性示例</h2>
<h3>List-style is positioned "inside":</h3>
<ul class="inside">
<li>Chocolate</li>
<li>Candies</li>
<li>Lollipops</li>
</ul>
<h3>List-style is positioned "outside":</h3>
<ul class="outside">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
</body>
</html>
将图像设置为列表样式的列表样式属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ul {
list-style: url('onitroad.png');
}
</style>
</head>
<body>
<h2>List-style 属性示例</h2>
<ul>
<li>Chocolate</li>
<li>Candies</li>
<li>Lollipops</li>
</ul>
</body>
</html>
CSS list-style 属性值说明
| 值 | 描述 |
|---|---|
| list-style-type | 用于定义列表项标记的类型。查看更多：CSS列表样式类型属性 |
| list-style-position | 用于定义将放置列表项标记的位置。查看更多：CSS列表 - 样式位置 |
| list-style-image | 用于放置图像而不是列表项标记。查看更多：CSS列表样式图像属性 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
CSS 列表样式属性是以下列表样式属性的简写属性：
- list-style-image
- list-style-position
- list-style-type
我们可以按照以下顺序设置所有属性：1list-style-type、2list-style-position、3list-style-image。
list-style 属性可以在列表项或者项列表（<ul> 或者 <ol>）上设置，该样式将级联并应用于该列表中的列表项。
如果上面的属性有缺失，它会自动设置为默认值。
| 初始值 | disc outside none |
|---|---|
| 应用于 | 列出项目（item）（item）。 |
| 继承 | 可继承 |
| 可动画的 | 无效 |
| 版本 | CSS1 |
| DOM 语法 | object.style.liststyle =“none”; |
日期：2020-06-02 22:14:38 来源：oir作者：oir