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 July 2015.

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

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

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

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

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

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

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

以任何顺序接受一个,二个或者三个关键词

<'list-style-type'>

参看 list-style-type

<'list-style-image'>

参看 list-style-image

<'list-style-position'>

参看 list-style-position

示例

HTML

html
List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <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

浏览器兼容性

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
symbols()

Legend

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

Full support
Full support
No support
No support

另参见