列表样式类型 | list-style-type

list-style-type属性指定列表项元素的外观。

/* Partial list of types */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: cjk-ideographic;
list-style-type: kannada;

/* A <string> */
list-style-type: '-';

/* Identifier matching an @counter-style rule */
list-style-type: custom-counter-style;

list-style-type: none;

/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;

由于该<li>元素是唯一默认的属性display:list-item，所以该属性通常应用于<li>元素，但可以应用于其display值为的任何元素list-item。

初始值	disc
应用于	list items
是否继承	yes
适用媒体	visual
计算值	as specified
Animation type	discrete
规范顺序	the unique non-ambiguous order defined by the formal grammar

颜色标记的颜色将与其应用的元素的计算颜色相同。

注意：这个属性应用于列表项目，即元素display: list-item; 默认情况下包含<li>元素。由于此属性是继承的，因此可以在父元素上设置（通常<ol>或<ul>）以使其适用于所有列表项。

语法

列表样式类型属性可以定义为下列任何一种：

• <custom-ident>价值

• 一个symbols()

• <string>值

• 关键词none.

取值

<custom-ident>匹配的一个值A的标识符@counter-style或预定义的样式之一：symbols()（https://developer.mozilla.org/en-US/docs/Web/CSS/symbols）定义列表的匿名风格。<string>指定的字符串将被用作项目的标记，none不显示项目标记。disc

• 默认值circle

• 空心圆

square

• 满正方形decimal

• 十进制数

• 从1开始

cjk-decimal

• 汉十进制数

• 例如一，二，三，...，九八，九九，一00

decimal-leading-zero

• 十进制数

• 用初始零填充

• 例如01，02，03，…98，99

lower-roman

• 小写罗马数字

• 例如I，II，III，IV，V…

upper-roman

• 大写罗马数字

• 例如I，II，III，IV，V…

lower-greek

• 小写古典希腊文

• 阿尔法，贝塔，伽马…

• 例如α，β，γ…

lower-alphalower-latin

• 小写ASCII字母

• 例如a，b，c，…z

• lower-latin在IE7和更早版本中不受支持。

• 见浏览器兼容性部分。

upper-alphaupper-latin

• 大写ASCII字母

• 例如A，B，C，…Z

• upper-latin在IE7和更早版本中不受支持。

arabic-indic-moz-arabic-indic

• 例armenian

• 传统亚美尼亚编号

• （ ayb/AYP，Ben/PEN，GIM/KEEM…

bengali-moz-bengali

• 例cambodian*

• 例

• 的同义词khmer

cjk-earthly-branch-moz-cjk-earthly-branch

• 例cjk-heavenly-stem-moz-cjk-heavenly-stem

• 例

cjk-ideographic

• 同trad-chinese-informal

• 例如一萬一千一百一十一

devanagari-moz-devanagari

• 例ethiopic-numeric

• 例

georgian

• 传统格鲁吉亚编号

• 例如，班，甘，…他，晒黑，在…

gujarati-moz-gujarati

• 例gurmukhi-moz-gurmukhi

• 例

hebrew

• 传统希伯来语编号hiragana

• A，我，u，e，o，ka，ki，…

• （日本人）

hiragana-iroha

• 我，罗，哈，妮，呵，他，到，…

• 伊洛哈是旧的日本人对三段式的排序。

japanese-formal

• 在法律或金融文件中使用的日语正式编号。

• 例如，壱萬壱阡壱百壱拾壱

• Kanjis的设计使得它们可以被修改成另一个正确的

japanese-informal

• 日语非正式编号kannada-moz-kannada

• 例

katakana

• A，I，U，E，O，Ka，Ki，…

• %28日本人%29

katakana-iroha

• 我，RO，HA，NI，Ho，HE，to，…

• 伊洛哈是旧的日本人对三段式的排序。

khmer-moz-khmer

• 例korean-hangul-formal

• 朝鲜语编号。

• 例如，商品价格

korean-hanja-formal

• 正式的韩语编号。

• 例如壹萬壹仟壹百壹拾壹

korean-hanja-informal

• 韩国韩语编号。

• 例如，萬一千百十一

lao-moz-lao

• 例lower-armenian%2A

• 例

malayalam-moz-malayalam

• 例mongolian

• 例

myanmar-moz-myanmar

• 例oriya-moz-oriya

• 例

persian-moz-persian

• 例simp-chinese-formal

• 简体中文正式编号。

• 例如壹万壹仟壹佰壹拾壹

simp-chinese-informal

• 简体中文非正式编号。

• 例如一万一千一百一十一

tamil-moz-tamil

• 例telugu-moz-telugu

• 例

thai-moz-thai

• 例tibetan%2A

• 例

trad-chinese-formal

• 传统中文正式编号。

• 例如壹萬壹仟壹佰壹拾壹

trad-chinese-informal

• 中国传统的非正式编号。

• 例如一萬一千一百一十一

upper-armenian%2A

• 例disclosure-open

• 符号，表示公开小部件(如<details>被打开了。

disclosure-closed

• 表示公开小部件的符号，如<details>已经关闭了。非标准扩展Mozilla%28Firefox%29、Blink%28Chrome和Opera%29以及WebKit%28Safari%29提供了一些预定义类型，以支持其他语言中的列表类型。请参阅兼容性表，以检查哪个浏览器支持哪个扩展。-moz-ethiopic-halehame

• 例

-moz-ethiopic-halehame-am

• 例ethiopic-halehame-ti-er-moz-ethiopic-halehame-ti-er

• 例

ethiopic-halehame-ti-et-moz-ethiopic-halehame-ti-et

• 例hangul-moz-hangul

• 例

• 例

• 例

hangul-consonant-moz-hangul-consonant

• 例

• 例

• 例

urdu-moz-urdu

• 例形式语法<counter-style> | <string> | nonewhere <counter-style> = <counter-style-name> | symbols() where <counter-style-name> = <custom-ident>实例CSSol.normal { list-style-type: upper-alpha; } /* or use the shortcut "list-style": */ ol.shortcut { list-style: upper-alpha; }HTML<ol class="normal">List 1 <li>Hello</li> <li>World</li> <li>What's up?</li> </ol> <ol class="shortcut">List 2 <li>Looks</li> <li>Like</li> <li>The</li> <li>Same</li> </ol>结果二次注记

• 有些类型需要安装合适的字体才能按预期显示。

• cjk-ideographic是相同的trad-chinese-informal它的存在是因为遗留的原因。

规范

Specification	Status	Comment
CSS Counter Styles Level 3The definition of 'list-style-type' in that specification.	Candidate Recommendation	Redefines CSS2.1 counters. Extends the syntax to support @counter-style rules. Defines using @counter-style the usual style types: hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha, japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-formal, trad-chinese-formal,korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal, ethiopic-numeric, disclosure-open and disclosure-closed. Extends <counter-style> with the symbols() functional notation.
CSS Lists and Counters Module Level 3The definition of 'list-style-type' in that specification.	Working Draft	Modify syntax to support for identifiers used in @counter-style rules to keywords. Support for a simple <string>.
CSS Level 2 (Revision 1)The definition of 'list-style-type' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support including : none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman	1.0	(Yes)	1.0 (1.0)	4.0	3.5	1.0 (85)
lower-latin, upper-latin, lower-greek, armenian, georgian	1.0	(Yes)	1.0 (1.0)	8.0	6.0	1.0 (85)
decimal-leading-zero	1.0	(Yes)	1.0 (1.0)	8.0	8.0	1.0 (85)
hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha	1.0	No support	1.0 (1.0)	No support	7.0 (but displays decimal numbers only) 15.0	1.0-1.2 (85-125)
japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-informal, trad-chinese-informal	No support	No support	1.0 (1.7 or earlier) -moz 28.0 (28.0)	No support	No support	No support
korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal	No support	No support	28.0 (28.0)	No support	No support	No support
ethiopic-numeric, persian, arabic-indic, devanagari, bengali, gurmukhi, gujarati, oriya, tamil, telugu, kannada, malayalam, thai, lao, myanmar, khmer, cjk-heavenly-stem, cjk-earthly-branch	No support	No support	1.0 (1.7 or earlier) -moz 33.0 (33.0) 1	No support	No support	No support
disclosure-open, disclosure-closed, mongolian	No support	No support	33.0 (33.0)	No support	No support	No support
<string>	No support	No support	39.0 (39.0)	No support	No support	No support

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?	?