当前位置：文江博客知识库简体中文文档 Web CSS list-style-type

list-style-type - CSS（层叠样式表）编辑

CSS 属性 list-style-type 可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）。

The color of the marker will be the same as the computed color of the element it applies to.

只有几个元素 (<li> 和 <summary>) 的默认值为 display: list-item。但是， list-style-type 属性可以应用在任何 display 的值为 list-item 的元素上。此外，由于这个属性是可继承的，它可以设置在父元素上 (通常是 <ol> 或 <ul>) 以便应用于所有子元素(<li>)。

语法

/* 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: trad-chinese-informal;
list-style-type: kannada;

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

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

/* Keyword value */
list-style-type: none;

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

list-style-type 的属性值可以是以下任意一项:

a <custom-ident> value
a symbols() value
a <string> value
the keyword none.

取值

<custom-ident>: A identifier matching the value of a @counter-style or one of the predefined styles:

symbols(): Defines an anonymous style of the list.
<string>: The specified string will be used as the item's marker.

none: 不显示列表项的标记。

关键字的取值是下列之一：

disc

实心圆点 (默认值)

circle

空心圆点

square

实心方块

decimal

十进制阿拉伯数字
从1开始

cjk-decimal

中日韩十进制数
例如: 一, 二, 三, ..., 九八, 九九, 一〇〇

decimal-leading-zero

Decimal numbers
Padded by initial zeros
E.g. 01, 02, 03, … 98, 99

lower-roman

Lowercase roman numerals
E.g. i, ii, iii, iv, v…

upper-roman

Uppercase roman numerals
E.g. I, II, III, IV, V…

lower-greek

Lowercase classical Greek
alpha, beta, gamma…
E.g. α, β, γ…

lower-alpha

lower-latin

Lowercase ASCII letters
E.g. a, b, c, … z
lower-latin is unsupported in IE7 and earlier
See Browser compatibility section.

upper-alpha

upper-latin

Uppercase ASCII letters
E.g. A, B, C, … Z
upper-latin is unsupported in IE7 and earlier

armenian

Traditional Armenian numbering
(ayb/ayp, ben/pen, gim/keem…

georgian

Traditional Georgian numbering
E.g. an, ban, gan, … he, tan, in…

hebrew

Traditional Hebrew numbering

ethiopic-numeric

Example

hiragana

a, i, u, e, o, ka, ki, …
(Japanese)

katakana

A, I, U, E, O, KA, KI, …
(Japanese)

hiragana-iroha

i, ro, ha, ni, ho, he, to, …
Iroha is the old japanese ordering of syllabs.

katakana-iroha

I, RO, HA, NI, HO, HE, TO, …
Iroha is the old japanese ordering of syllabs.

japanese-informal

Japanese informal numbering

japanese-formal

Japanese formal numbering to be used in legal or financial document.
E.g., 壱萬壱阡壱百壱拾壱
The kanjis are designed so that they can't be modified to look like another correct one

korean-hangul-formal

Korean hangul numbering.
E.g., 일만 일천일백일십일

korean-hanja-informal

Korean hanja numbering.
E.g., 萬一千百十一

korean-hanja-formal

Formal Korean Han numberging.
E.g. 壹萬壹仟壹百壹拾壹

simp-chinese-informal

Simplified Chinese informal numberging.
E.g. 一万一千一百一十一

cjk-ideographic

Identical to simp-chinese-informal
E.g. 一万一千一百一十一

simp-chinese-formal

Simplified Chinese formal numberging.
E.g. 壹万壹仟壹佰壹拾壹

trad-chinese-informal

Traditional Chinese informal numberging.
E.g. 一萬一千一百一十一

trad-chinese-formal

Traditional Chinese formal numberging.
E.g. 壹萬壹仟壹佰壹拾壹

Extended set of values provided by Mozilla (Firefox), Blink (Chrome and Opera) and WebKit (Safari) to support list types in other languages. See the compatibility table to check which browsers supports which extension.

arabic-indic

-moz-arabic-indic

Example

bengali

-moz-bengali

Example

cjk-earthly-branch

-moz-cjk-earthly-branch

Example

cjk-heavenly-stem

-moz-cjk-heavenly-stem

Example

devanagari

-moz-devanagari

Example

-moz-ethiopic-halehame

Example

-moz-ethiopic-halehame-am

Example

ethiopic-halehame-ti-er

-moz-ethiopic-halehame-ti-er

Example

ethiopic-halehame-ti-et

-moz-ethiopic-halehame-ti-et

Example

gujarati

-moz-gujarati

Example

gurmukhi

-moz-gurmukhi

Example

hangul

-moz-hangul

Example
Example
Example

hangul-consonant

-moz-hangul-consonant

Example
Example
Example

kannada

-moz-kannada

Example

khmer

-moz-khmer

Example

lao

-moz-lao

Example

malayalam

-moz-malayalam

Example

myanmar

-moz-myanmar

Example

oriya

-moz-oriya

Example

persian

-moz-persian

Example

-moz-tamil

Example

telugu

-moz-telugu

Example

thai

-moz-thai

Example

urdu

-moz-urdu

Example

Formal syntax

<counter-style> | <string> | nonewhere 
<counter-style> = <counter-style-name> | symbols()
where 
<counter-style-name> = <custom-ident>

例子

CSS

ol.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>

Result

Accessibility concerns

The VoiceOver screen reader has an issue where unordered lists with a list-style-typevalue of none applied to them will not be announced as a list. To address this, add a zero-width space as pseudo content before each list item to ensure the list is announced properly. This ensures the design is unaffected by the bug fix and that list items are not improperly described.

ul {
  list-style: none;
}

ul li::before {
  content: "\200B";
}

注释

Some types require a suitable font installed to display as expected.
The cjk-ideographic is identical to trad-chinese-informal; it exists for legacy reasons.

规范

Specification	Status	Comment
CSS Lists Module Level 3 list-style-type	Working Draft	Adds support for identifiers used in `@counter-style` rules to keywords. Adds `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` style types.
CSS Level 2 (Revision 1) list-style-type	Recommendation	Initial definition.