列表类型 | list-style
列表式
该list-style
CSS属性是设置定义如何显示列表中的单个值的简写: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
*disc
list-style-position
*outside
list-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 |