list-style-type
===============

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

尝试一下
----

The color (en-US) 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 的属性值可以是以下任意一项：

* 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()` (en-US)
    + : 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-type`value 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";
}
```


* VoiceOver and list-style-type: none – Unfettered Thoughts
* MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
注释
--

* 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 |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `list-style`, `list-style-image`, `list-style-position`