CSS

列表类型 | list-style

列表式

list-styleCSS属性是设置定义如何显示列表中的单个值的简写:list-style-typelist-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 typediscrete
规范顺序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-typelist-style-image都设置,则list-style-type用作后备,如果图像不可用。

价值

list-style-typelist-style-typelist-style-imagelist-style-imagelist-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; }

结果

规格

SpecificationStatusComment
CSS Lists and Counters Module Level 3The definition of 'list-style' in that specification.Working DraftNo change.
CSS Level 2 (Revision 1)The definition of 'list-style' in that specification.RecommendationInitial definition.

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0(Yes)1.0 (1.7 or earlier)4.07.01.0

FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0(Yes)1.0 (1)6.06.01.0