CSS list-style-type Property

例

设置不同的列表样式：

ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;}

试一试»

更多"Try it Yourself"下面的例子。

定义和用法

列表样式类型指定列表项标记的列表中的类型。

默认值：	disc
遗传：	yes
动画：	no. Read about animatable
版：	CSS1
JavaScript语法：	object .style.listStyleType="square" Try it

浏览器支持

在表中的数字规定，完全支持该属性的第一个浏览器版本。

属性
list-style-type	1.0	4	1.0	1.0	3.5

Note: Internet Explorer和Opera 12和早期版本不支持的值：CJK表意文字，希伯来文，平假名，片假名，伊吕波，片假名和片假名，伊吕波。

Note: IE8，和更早版本，只支持属性值：小数领先的零，低希腊，低拉丁，上拉丁，亚美尼亚，格鲁吉亚，如果指定一个DOCTYPE是继承！

CSS语法

list-style-type:value;

属性值

值	描述	播放
disc	默认值。标记是一个实心圆	播放 ”
armenian	标记是传统的亚美尼亚编号	播放 ”
circle	标记是一个圆	播放 ”
cjk-ideographic	标记是纯数字的表意	播放 ”
decimal	该标记是一个数字	播放 ”
decimal-leading-zero	标记为带前导零（01，02，03等）数量	播放 ”
georgian	标记是传统格鲁吉亚编号	播放 ”
hebrew	标记是传统的希伯来编号	播放 ”
hiragana	标记是传统的平假名编号	播放 ”
hiragana-iroha	标记是传统的平假名伊吕波编号	播放 ”
katakana	标记是传统的片假名编号	播放 ”
katakana-iroha	标记是传统的片假名伊吕波编号	播放 ”
lower-alpha	标记是低级-α (a, b, c, d, e, etc.)	播放 ”
lower-greek	标记是低希腊语	播放 ”
lower-latin	标记是拉丁低(a, b, c, d, e, etc.)	播放 ”
lower-roman	标记是低级-罗马(i, ii, iii, iv, v, etc.)	播放 ”
none	无标记显示	播放 ”
square	该标记是正方形	播放 ”
upper-alpha	标记是大写字母(A, B, C, D, E, etc.)	播放 ”
upper-latin	标记是大写拉丁字母(A, B, C, D, E, etc.)	播放 ”
upper-roman	标记是上层罗马(I, II, III, IV, V, etc.)	播放 ”
initial	将此属性设置为默认值。阅读关于初始	播放 ”
inherit	继承其父元素此属性。阅读关于继承

更多示例

例

这个例子演示了所有不同的列表项标记：

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}

ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}

试一试»

例

如何添加项目符号的颜色<ul>或<ol>通过删除其默认子弹和补充，看起来像子弹HTML实体(•) ：

ul {
    list-style: none; /* Remove list bullets */
    padding: 0;
    margin: 0;
}

li {
    padding-left: 16px;
}

li:before {
    content: "•"; /* Insert content that looks like bullets */
    padding-right: 8px;
    color: blue; /* Or a color you prefer */
}

试一试»

CSS 参考

CSS 属性

CSS list-style-type Property

例

定义和用法

浏览器支持

CSS语法

属性值

更多示例

例

例

相关页面