列表类型 | list-style (Lists & Counters) – CSS 中文开发手册
列表类型 | list-style (Lists & Counters) - CSS 中文开发手册
该list-styleCSS属性是设置定义如何显示列表中的单个值的简写：list-style-type，list-style-image，和list-style-position。
/* 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;
|
初始值 |
as each of the properties of the shorthand: list-style-type: disc list-style-position: outside list-style-image: none |
|---|---|
|
应用于 |
list items |
|
是否继承 |
yes |
|
适用媒体 |
visual |
|
计算值 |
as each of the properties of the shorthand: list-style-image: none or the image with its URI made absolute list-style-position: as specified list-style-type: as specified |
|
Animation type |
discrete |
|
规范顺序 |
order of appearance in the formal grammar of the values |
list-style-type*disclist-style-position*outsidelist-style-image*none
Applies to list items [Inherited](inheritance) yes Media visual [Computed value](computed_value) as each of the properties of the shorthand:
list-style-image*none或将具有其URI的图像变为绝对的。list-style-position*具体规定list-style-type*具体规定
Animation type discrete Canonical order order of appearance in the formal grammar of the values
注意：该属性应用于列表项目，即元素display: list-item;。默认情况下，这包括<li>元素。由于此属性是继承的，因此可以在父元素上设置（通常<ol>或<ul>），以使相同的列表样式适用于所有内部项目。
句法
该list-style属性按任意顺序指定为一个，两个或三个关键字。如果list-style-type和list-style-image都设置，则list-style-type用作后备，如果图像不可用。
价值
list-style-type看list-style-type。list-style-image看list-style-image。list-style-position请参阅list-style-position.none否使用列表样式。
形式语法
<'list-style-type'> || <'list-style-position'> || <'list-style-image'>
实例
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
.one {
list-style: circle;
}
.two {
list-style: square inside;
}
结果
规格
|
Specification |
Status |
Comment |
|---|---|---|
|
CSS Lists and Counters Module Level 3The definition of 'list-style' in that specification. |
Working Draft |
No change. |
|
CSS Level 2 (Revision 1)The definition of 'list-style' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
|
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
|---|---|---|---|---|---|---|
|
Basic support |
1.0 |
(Yes) |
1.0 (1.7 or earlier) |
4.0 |
7.0 |
1.0 |
|
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
|---|---|---|---|---|---|---|
|
Basic support |
1.0 |
(Yes) |
1.0 (1) |
6.0 |
6.0 |
1.0 |
