CSS list-style-type 属性
实例
设置不同的列表样式：
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
亲自试一试 »
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
下面有更多实例。
定义和用法
list-style-type 属性设置列表项标记的类型。
| 默认值: | disc |
|---|---|
| Inherited: | yes |
| Animatable: | no. 阅读有关动画的信息 |
| 版本: | CSS1 |
| JavaScript syntax: | object.style.listStyleType="square" 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| list-style-type | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注释: Edge 18 和 Opera 12 及更早版本不支持这些值: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha.
语法
list-style-type: value;
属性值
| 值 | 描述 | 试一试 |
|---|---|---|
| disc | 默认。标记是实心圆。 | 亲自试一试 » |
| armenian | 传统的亚美尼亚编号方式 | 亲自试一试 » |
| circle | 标记是空心圆。 | 亲自试一试 » |
| cjk-ideographic | 简单的表意数字 | 亲自试一试 » |
| decimal | 标记是数字。 | 亲自试一试 » |
| decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等。) | 亲自试一试 » |
| georgian | 传统的乔治亚编号方式(an, ban, gan, 等。) | 亲自试一试 » |
| hebrew | 传统的希伯来编号方式 | 亲自试一试 » |
| hiragana | 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名） | 亲自试一试 » |
| hiragana-iroha | 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） | 亲自试一试 » |
| katakana | 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） | 亲自试一试 » |
| katakana-iroha | 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） | 亲自试一试 » |
| lower-alpha | 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) | 亲自试一试 » |
| lower-greek | 小写希腊字母(alpha, beta, gamma, 等。) | 亲自试一试 » |
| lower-latin | 小写拉丁字母(a, b, c, d, e, 等。) | 亲自试一试 » |
| lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) | 亲自试一试 » |
| none | 无标记。 | 亲自试一试 » |
| square | 标记是实心方块。 | 亲自试一试 » |
| upper-alpha | 大写英文字母 (A, B, C, D, E, 等。) | 亲自试一试 » |
| upper-greek | The marker is upper-greek | 亲自试一试 » |
| upper-latin | 大写拉丁字母(A, B, C, D, E, 等。) | 亲自试一试 » |
| upper-roman | 大写罗马数字(I, II, III, IV, V, 等。) | 亲自试一试 » |
| initial | 将此属性设置为其默认值。请参阅 initial | 亲自试一试 » |
| inherit | 从其父元素继承此属性。请参阅 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-greek;}
ol.t {list-style-type: upper-latin;}
ol.u {list-style-type: upper-roman;}
ol.v {list-style-type: none;}
ol.w {list-style-type: inherit;}
亲自试一试 »
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-greek;}
ol.t {list-style-type: upper-latin;}
ol.u {list-style-type: upper-roman;}
ol.v {list-style-type: none;}
ol.w {list-style-type: inherit;}
实例
如何通过删除 ul 或 ol 的默认项目符号并添加类似项目符号(•) 的 HTML 实体来为其添加项目符号颜色：
ul {
list-style: none; /* 删除列表项目符号 */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li:before {
content: "•"; /* 插入看起来像项目符号的内容 */
padding-right: 8px;
color: blue; /* 或者你喜欢的颜色 */
}
亲自试一试 »
list-style: none; /* 删除列表项目符号 */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li:before {
content: "•"; /* 插入看起来像项目符号的内容 */
padding-right: 8px;
color: blue; /* 或者你喜欢的颜色 */
}
相关页面
CSS 教程: CSS List
CSS 参考手册: list-style 属性
HTML DOM 参考手册: listStyleType 属性
