此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
list-style
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
list-style CSS 属性是一个简写对属性集合，包括list-style-type,list-style-image, 和list-style-position。
CSS list-style 属性是设置list-style-type,list-style-image 和list-style-position 的简写属性。
| 初始值 | 该简写所对应的每个属性：
|
|---|---|
| 适用元素 | 列表项 |
| 是否是继承属性 | 是 |
| 计算值 | 该简写所对应的每个属性：
|
| 动画类型 | 该简写所对应的每个属性：
|
语法
Formal syntax:list-style =
<'list-style-position'>||
<'list-style-image'>||
<'list-style-type'>
<list-style-position> =
inside|
outside
<list-style-image> =
<image>|
none
<list-style-type> =
<counter-style>|
<string>|
none
<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>
<counter-style> =
<counter-style-name>|
<symbols()>
<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)
<image-set()> =
image-set(<image-set-option>#)
<cross-fade()> =
cross-fade(<cf-image>#)
<element()> =
element(<id-selector>)
<symbols()> =
symbols(<symbols-type>?[<string>|<image>]+)
<image-tags> =
ltr|
rtl
<image-src> =
<url>|
<string>
<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?
<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?
<id-selector> =
<hash-token>
<symbols-type> =
cyclic|
numeric|
alphabetic|
symbolic|
fixed
值
以任何顺序接受一个，二个或者三个关键词
示例
HTML
html
List 1<ul> <li>List Item1</li> <li>List Item2</li> <li>List Item3</li></ul>List 2<ul> <li>List Item A</li> <li>List Item B</li> <li>List Item C</li></ul>CSS
css
.one { list-style: circle;}.two { list-style: square inside;}Result
规范
| Specification |
|---|
| CSS Lists and Counters Module Level 3 # list-style-property |