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 屬性
