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;}
自己尝试 »
下面还有更多“自己尝试”示例。
定义和用法
The list-style-type 指定列表中列表项标记的类型。
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| list-style-type | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注意：Edge 18 和 Opera 12 及更早版本不支持以下值：cjk-ideographic、hebrew、hiragana、hiragana-iroha、katakana 和 katakana-iroha。
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 等） | 演示 ❯ |
| lower-greek | 标记是小写希腊字母 | 演示 ❯ |
| 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 | 标记是大写希腊字母 | 演示 ❯ |
| 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;}
自己尝试 »
示例
如何通过删除其默认子弹并添加看起来像子弹的 HTML 实体（•）来为 <ul> 或 <ol> 添加子弹颜色
ul {
list-style: none; /* 移除列表子弹 */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li::before {
content: "•"; /* 插入看起来像子弹的内容 */
padding-right: 8px;
color: blue; /* 或者您喜欢的颜色 */
}
自己尝试 »
相关页面
CSS 教程： CSS 列表
CSS 参考： list-style 属性
HTML DOM 参考： listStyleType 属性
