list-style-type 属性用于设置列表项目的前导样式。标记的颜色将与其应用的元素的颜色保持相同。
很少有 HTML 元素（例如 <li> 和 <summary>）具有默认值 display: list-item。任何带有 display: list-item 的元素都可以在其上设置 list-style-type 属性。
很少有 list-style-type 值需要安装适当的字体，以便按预期显示内容。
此外，中日韩表意文字与繁体中文非正式版本相同，因为它是遗留要求所必需的。
语法
CSS 属性 list-style-type 可以有不同的值。让我们检查所有可能的可用语法来设置 list-style-type 的值。
@counter-style value
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: cjk-decimal;
list-style-type: decimal-leading-zero;
list-style-type: lower-roman;
list-style-type: upper-roman;
list-style-type: lower-greek;
list-style-type: lower-aplha, lower-latin;
list-style-type: upper-aplha, upper-latin;
list-style-type: arabic-indic, -moz-arabic-indic;
list-style-type: armenian;
list-style-type: bengali, -moz-bengali;
list-style-type: cambodian/khmer;
list-style-type: cjk-earthly-branch, -moz-cjk-earthly-branch;
list-style-type: cjk-heavenly-stem, -moz-cjk-heavenly-stem;
list-style-type: cjk-ideographic;
list-style-type: devanagari, -moz-devanagari;
list-style-type: ethiopic-numeric;
list-style-type: georgian;
list-style-type: gujarati, -moz-gujarati;
list-style-type: gurmukhi, -moz-gurmukhi;
list-style-type: hebrew;
list-style-type: hiragana;
list-style-type: hiragana-iroha;
list-style-type: japanese-formal;
list-style-type: japanese-informal;
list-style-type: kannada, -moz-kannada;
list-style-type: katakana;
list-style-type: katakana-iroha;
list-style-type: korean-hangul-formal;
list-style-type: korean-hanja-formal;
list-style-type: korean-hanja-informal;
list-style-type: lao, -moz-lao;
list-style-type: lower-armenian;
list-style-type: malayalam, -moz-malayalam;
list-style-type: mongolian;
list-style-type: myanmar, -moz-myanmar;
list-style-type: oriya, -moz-oriya;
list-style-type: persian, -moz-persian;
list-style-type: simp-chinese-formal;
list-style-type: simp-chinese-informal;
list-style-type: tamil, -moz-tamil;
list-style-type: telugu, -moz-telugu;
list-style-type: thai, -moz-thai;
list-style-type: tibetan;
list-style-type: trad-chinese-formal;
list-style-type: trad-chinese-informal;
list-style-type: upper-armenian;
list-style-type: disclosure-open;
list-style-type: disclosure-closed; 字符串值
list-style-type: "<string>"; 关键字值
list-style-type: none; 全局值
list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: revert-layer;
list-style-type: unset; 适用范围
列表项目。 <li> 和 <summary> 等元素，以及具有 display: list-item 的所有元素。
DOM 语法
object.style.listStyleType = <counter-style> | <string> | <none> 属性值
CSS 属性list-style-type 可以具有以下值之一:
<custom ident>:它是与 @counter-style 的值或任何一个匹配的标识符预定义样式。
symbols():设置列表的匿名样式。
<string>:项目的标记决定根据传递的字符串值。
none:不设置列表项的标记。
可访问性问题:当 list-style-type 的值设置为 none 时，Safari 不会将有序或无序列表识别为可访问性树中的列表。
示例
CSS list-style-type : decimal
以下是有序列表的 list-style-type:decimal CSS 属性示例:
<html>
<head>
<style>
.type-decimal {
list-style-type: decimal;
}
</style>
</head>
<body>
<h2>Ordered list - list style type</h2>
<ol class="type-decimal"><u>List style type - decimal</u>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html> CSS list-style-type: decimal-leading-zero
以下是有序列表的 list-style-type:decimal-leading-zero CSS 属性的示例:
<html>
<head>
<style>
.type-decimal-zero {
list-style-type: decimal-leading-zero;
}
</style>
</head>
<body>
<h2>Ordered list - list style type</h2>
<ol class="type-decimal-zero"><u>List style type - decimal-leading-zero</u>
<li>First Item
<ol>
<li>Sub first item</li>
<li>Sub second item</li>
</ol>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html> CSS list-style-type: upper-alpha
以下是 list-style-type 的示例:有序列表的 upper-alpha CSS 属性:
<html>
<head>
<style>
.type-upper-alpha {
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<h2>Ordered list - list style type</h2>
<ol class="type-upper-alpha"><u>List style type - upper-alpha</u>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html> CSS list-style -type: lower-alpha
以下是 list-style-type: lower-alpha CSS 属性的有序列表示例:
<html>
<head>
<style>
.type-lower-alpha {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>Ordered list - list style type</h2>
<ol class="type-lower-alpha"><u>List style type - lower-alpha</u>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html> CSS list-style-type: lower-greek
以下是有序列表的 list-style-type: lower-greek CSS 属性示例:
<html>
<head>
<style>
.type-lower-greek {
list-style-type: lower-greek;
}
</style>
</head>
<body>
<h2>Ordered list - list style type</h2>
<ol class="type-lower-greek"><u>List style type - lower-greek</u>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html> CSS list-style-type: upper-greek
这是一个 list-style-type 的示例:有序列表的 upper-greek CSS 属性:
<html>
<head>
<style>
.type-upper-greek {
list-style-type: upper-greek;
}
</style>
</head>
<body>
<h2>Ordered list - list style type</h2>
<ol class="type-upper-greek"><u>List style type - upper-greek</u>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html> CSS list-style-type: lower-roman
以下是有序列表的 list-style-type: lower-roman CSS 属性示例:
<html>
<head>
<style>
.type-lower-roman {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<h2>Ordered list - list style type</h2>
<ol class="type-lower-roman"><u>List style type - lower-roman</u>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html> CSS list-style-type: upper-roman
这里是list-style-type 示例:有序列表的 upper-roman CSS 属性:
<html>
<head>
<style>
.type-upper-roman {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Ordered list - list style type</h2>
<ol class="type-upper-roman"><u>List style type - upper-roman</u>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html> CSS list-style-type: lower-latin
这里是list-style-type的示例:有序列表的 lower-latin CSS 属性:
<html>
<head>
<style>
.type-lower-latin {
list-style-type: lower-latin;
}
</style>
</head>
<body>
<h2>Ordered list - list style type</h2>
<ol class="type-lower-latin"><u>List style type - lower-latin</u>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html> CSS list-style-type: upper-latin
以下是 list-style-type 的示例:有序列表的 upper-latin CSS 属性:
<html>
<head>
<style>
.type-upper-latin {
list-style-type: upper-latin;
}
</style>
</head>
<body>
<h2>Ordered list - list style type</h2>
<ol class="type-upper-latin"><u>List style type - upper-latin</u>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html> CSS list-style-type: none
以下是 list-style-type 的示例: 有序列表的 none CSS 属性:
<html>
<head>
<style>
.type-none {
list-style-type: none;
}
</style>
</head>
<body>
<h2>Ordered list - list style type</h2>
<ol class="type-none"><u>List style type - none</u>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html> CSS list-style-type: disk
以下是无序列表的 list-style-type:disc CSS 属性示例:
<html>
<head>
<style>
.type-disc {
list-style-type: disc;
}
</style>
</head>
<body>
<h2>Unordered list - list style type</h2>
<ul class="type-disc"><u>List style type - disc</u>
<li>First Item
<ul>
<li>Sub first item</li>
<li>Sub second item</li>
</ul>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html> CSS list-style-type: circle
以下是一个 list-style-type 的示例:无序列表的circle CSS 属性:
<html>
<head>
<style>
.type-circle {
list-style-type: circle;
}
</style>
</head>
<body>
<h2>Unordered list - list style type</h2>
<ul class="type-circle"><u>List style type - circle</u>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html> CSS list-style-type: square
以下是 list-style-type 的示例:无序列表的 square CSS 属性:
<html>
<head>
<style>
.type-square {
list-style-type: square;
}
</style>
</head>
<body>
<h2>Unordered list - list style type</h2>
<ul class="type-square"><u>List style type - square</u>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html> CSS list-style-type: none
以下是无序列表的 list-style-type: none CSS 属性的示例:
<html>
<head>
<style>
.type-none {
list-style-type: none;
}
</style>
</head>
<body>
<h2>Unordered list - list style type</h2>
<ul class="type-none"><u>List style type - none</u>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html>