CSS属性参考 | list-style-type

07-01 次

标签列表 css教程 css属性

CSS list-style-type 属性用于指定列表项标记符号的外观样式。

也可以通过list-style-type属性来指定通过display: list-item指定的列表元素的列表项标记的外观样式。

只有在list-style-image属性设置为none时，list-style-type属性设置的列表项外观才会被呈现出来。否则列表项标记使用指定的图像作为标记图像。

可以使用的列表项标记有三种类型：

图形类型：实心圆点，空心圆点和实心方块。
数字类型。
字母类型。

列表项标记的颜色和列表项的颜色相同。列表项标记的值可以是预定义的关键字，或CSS3中才能使用的自定义字符串。自定义字符串在CSS3中使用::marker伪元素来设置。目前还没有浏览器支持自定义字符串。

官方语法

list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

CSS3新的语法格式为：

list-style-type: <string> | <counter-style> | none

参数：

disc：使用实心圆点作为列表标记。
circle：使用空心圆点作为列表标记。
square：使用实心方块作为列表标记。
decimal：使用十进制阿拉伯数字作为列表标记，数字从1开始。
decimal-leading-zero：前导0的十进制数，如01, 02, 03, …, 98, 99。
lower-roman：小写的罗马数字，如：i, ii, iii, iv, v。
upper-roman：大写的罗马数字，如：I, II, III, IV, V。
georgian：传统的格鲁吉亚编号，如：an, ban, gan, …, he, tan, in, in-an, …。
armenian：传统的大写亚美尼亚编号。
lower-greek：小写希腊字母，如：α，β，γ。
lower-latin：小写的ASCII字符。如：a, b, c, … z。IE7及之前的IE浏览器不支持该取值。
upper-latin：：大写的ASCII字符。如：A, B, C, … Z。IE7及之前的IE浏览器不支持该取值。
lower-alpha：小写的ASCII字符。如：a, b, c, … z。
upper-alpha：：大写的ASCII字符。如：A, B, C, … Z。
none：列表标记为空。
inherit：继承父元素的列表标记。

list-style-type属性的默认值为disc。

应用范围

list-style-position属性可以应用在列表元素或display: list-item的元素上。

示例代码

<ol class="upper-alpha">
  <li>列表项-1</li>
  <li>列表项-2</li>
  <li>列表项-3</li>
</ol>

对上面的列表使用下面的CSS代码：

ol.upper-alpha {
    list-style-type: upper-alpha;
}

得到的结果为：

列表项-1
列表项-2
列表项-3

在线演示

下面的例子演示了list-style-type属性的各种取值的效果：

Disc:

列表项-1
列表项-2
列表项-3

Circle:

列表项-1
列表项-2
列表项-3

Square:

列表项-1
列表项-2
列表项-3

decimal:

列表项-1
列表项-2
列表项-3

decimal-leading-zero:

列表项-1
列表项-2
列表项-3

lower-roman:

列表项-1
列表项-2
列表项-3

upper-roman:

列表项-1
列表项-2
列表项-3

georgian:

列表项-1
列表项-2
列表项-3

armenian:

列表项-1
列表项-2
列表项-3

lower-latin (lower-alpha):

列表项-1
列表项-2
列表项-3

upper-latin (upper-alpha):

列表项-1
列表项-2
列表项-3

lower-greek:

列表项-1
列表项-2
列表项-3

none:

列表项-1
列表项-2
列表项-3

浏览器支持

所有的现代浏览器都支持list-style-type属性的 inherit, none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman 值，包括Chrome, Firefox, Safari, Opera, Internet Explorer4+ 以及 Android 和 iOS。

lower-latin, upper-latin, lower-greek, armenian, georgian, decimal-leading-zero值在IE中需要IE8+才支持。