list-style
CSS
shorthand property
allows you set all the list style properties at once.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
注意：
This property is applied to list items, i.e., elements with
.
By default
this includes
display
: list-item;
<li>
elements. Because this property is inherited, it can be set on a parent element (normally
<ol>
or
<ul>
) to make the same list styling apply to all the items inside.
此特性是下列 CSS 特性的简写：
/* type */
list-style: square;
/* image */
list-style: url('../img/shape.png');
/* position */
list-style: inside;
/* type | position */
list-style: georgian inside;
/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;
/* Keyword value */
list-style: none;
/* Global values */
list-style: inherit;
list-style: initial;
list-style: unset;
list-style
property is specified as one, two, or three keywords in any order. If
list-style-type
and
list-style-image
are both set, then
list-style-type
is used as a fallback if the image is unavailable.
list-style-type
list-style-type
.
list-style-image
list-style-image
.
list-style-position
list-style-position
.
none
No list style is used.
Safari has an issue whereby unordered lists with a
list-style
value of
none
applied to them will not be recognized as a list in the accessibility tree. To address this, add a
zero-width space
as
pseudo-content
before each list item to ensure the list is recognized 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";
}
| 初始值 |
as each of the properties of the shorthand:
|
|---|---|
| 适用于 | list items |
| 继承 | yes |
| 计算值 |
as each of the properties of the shorthand:
|
| 动画类型 | discrete |
<'list-style-type'> || <'list-style-position'> || <'list-style-image'>
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>
.one {
list-style: circle;
}
.two {
list-style: square inside;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Lists Module Level 3
The definition of 'list-style' in that specification. |
工作草案 | 无变化。 |
|
CSS Level 2 (Revision 1)
The definition of 'list-style' in that specification. |
推荐 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
list-style
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 4 | Opera 完整支持 7 | Safari 完整支持 1 | WebView Android 完整支持 1 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
symbols
|
Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 35 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 35 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持