list-style-type

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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>)。

语法

css
/* 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 的属性值可以是以下任意一项:

取值

  • <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
    • : 十进制阿拉伯数字
  • cjk-decimal 实验性
    • : 中日韩十进制数
  • decimal-leading-zero
    • : Decimal numbers, padded by initial zeros.
  • lower-roman
    • : Lowercase roman numerals
  • upper-roman
    • : Uppercase roman numerals
  • lower-greek
    • : Lowercase classical Greek
      • alpha, beta, gamma…
  • lower-alpha, lower-latin
    • : Lowercase ASCII letters
  • upper-alpha, upper-latin
    • : Uppercase ASCII letters
  • armenian
    • : Traditional Armenian numbering
  • georgian
    • : Traditional Georgian numbering
  • hebrew 实验性
    • : Traditional Hebrew numbering
  • ethiopic-numeric 实验性
  • hiragana 实验性
    • : Dictionary-order hiragana lettering.
  • katakana 实验性
    • : Dictionary-order katakana lettering
  • hiragana-iroha 实验性
    • : Iroha is the old japanese ordering of syllabs.
  • katakana-iroha 实验性
    • : 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. The kanjis are designed so that they can't be modified to look like another correct one
  • korean-hangul-formal 实验性
    • : Korean hangul numbering.
  • korean-hanja-informal 实验性
    • : Korean hanja numbering.
  • korean-hanja-formal 实验性
    • : Formal Korean Han numberging.
  • simp-chinese-informal 实验性
    • : Simplified Chinese informal numberging.
  • cjk-ideographic 实验性
    • : Identical to simp-chinese-informal
  • simp-chinese-formal 实验性
    • : Simplified Chinese formal numberging.
  • trad-chinese-informal 实验性
    • : Traditional Chinese informal numberging.
  • trad-chinese-formal 实验性
    • : Traditional Chinese formal numberging.

非标准扩展

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
  • bengali-moz-bengali
  • cjk-earthly-branch-moz-cjk-earthly-branch
  • cjk-heavenly-stem-moz-cjk-heavenly-stem
  • devanagari-moz-devanagari
  • -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
  • gujarati-moz-gujarati
  • gurmukhi-moz-gurmukhi
  • hangul-moz-hangul
  • hangul-consonant-moz-hangul-consonant
  • kannada-moz-kannada
  • khmer-moz-khmer
  • lao-moz-lao
  • malayalam-moz-malayalam
  • myanmar-moz-myanmar
  • oriya-moz-oriya
  • persian-moz-persian
  • -moz-tamil
  • telugu-moz-telugu
  • thai-moz-thai
  • urdu-moz-urdu

Formal syntax

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

<counter-style> =
<counter-style-name> |
<symbols()>

<symbols()> =
symbols( <symbols-type>? [ <string> | <image> ]+ )

<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed

<image> =
<url> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

例子

CSS

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

/* or use the shortcut "list-style": */
ol.shortcut {
  list-style: upper-alpha;
}

HTML

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.

css
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
CSS Lists and Counters Module Level 3
# text-markers
CSS Counter Styles Level 3
# extending-css2

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
list-style-type
afar
Non-standard
amharic
Non-standard
amharic-abegede
Non-standard
arabic-indic
armenian
asterisks
Non-standard
bengali
binary
Non-standard
cambodian
circle
cjk-decimal
cjk-earthly-branch
cjk-heavenly-stem
cjk-ideographic
decimal
decimal-leading-zero
devanagari
disc
disclosure-closed
disclosure-open
ethiopic
Non-standard
ethiopic-abegede
Non-standard
ethiopic-abegede-am-et
Non-standard
ethiopic-abegede-gez
Non-standard
ethiopic-abegede-ti-er
Non-standard
ethiopic-abegede-ti-et
Non-standard
ethiopic-halehame
Non-standard
ethiopic-halehame-aa-er
Non-standard
ethiopic-halehame-aa-et
Non-standard
ethiopic-halehame-am
Non-standard
ethiopic-halehame-am-et
Non-standard
ethiopic-halehame-gez
Non-standard
ethiopic-halehame-om-et
Non-standard
ethiopic-halehame-sid-et
Non-standard
ethiopic-halehame-so-et
Non-standard
ethiopic-halehame-ti-er
Non-standard
ethiopic-halehame-ti-et
Non-standard
ethiopic-halehame-tig
Non-standard
ethiopic-numeric
footnotes
Non-standard
georgian
gujarati
gurmukhi
hangul
Non-standard
hangul-consonant
Non-standard
hebrew
hiragana
hiragana-iroha
japanese-formal
japanese-informal
kannada
katakana
katakana-iroha
khmer
korean-hangul-formal
korean-hanja-formal
korean-hanja-informal
lao
lower-alpha
lower-armenian
lower-greek
lower-hexadecimal
Non-standard
lower-latin
lower-norwegian
Non-standard
lower-roman
malayalam
mongolian
myanmar
none
octal
Non-standard
oriya
oromo
Non-standard
persian
sidama
Non-standard
simp-chinese-formal
simp-chinese-informal
somali
Non-standard
square
<string>
symbols()
tamil
telugu
thai
tibetan
tigre
Non-standard
tigrinya-er
Non-standard
tigrinya-er-abegede
Non-standard
tigrinya-et
Non-standard
tigrinya-et-abegede
Non-standard
trad-chinese-formal
trad-chinese-informal
upper-alpha
upper-armenian
upper-greek
Non-standard
upper-hexadecimal
Non-standard
upper-latin
upper-norwegian
Non-standard
upper-roman
urdu
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见