列表类型 | list-style
该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*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 句法
该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 |
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com

