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;}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
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: 值;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| 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;}
自己动手试一试 »
示例
如何为 <ul> 或 <ol> 添加项目符号颜色，方法是移除其默认项目符号并添加一个看起来像项目符号的 HTML 实体（•）
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 属性
