CSS中可以通過list-style
屬性來控制列表樣式。該屬性有三個子屬性:list-style-type
、list-style-image
和list-style-position
。其中list-style-type
最常用。
list-style-type
屬性用于定義列表項標記的樣式,常用的屬性值如下:
ul { list-style-type: none; /* 不顯示標記 */ list-style-type: disc; /* 默認樣式,實心圓點 */ list-style-type: circle; /* 空心圓圈 */ list-style-type: square; /* 實心正方形 */ list-style-type: decimal; /* 阿拉伯數字,1, 2, 3... */ list-style-type: decimal-leading-zero; /* 帶前導0的數字,01, 02, 03... */ list-style-type: lower-roman; /* 小寫羅馬數字,i, ii, iii... */ list-style-type: upper-roman; /* 大寫羅馬數字,I, II, III... */ list-style-type: lower-alpha; /* 小寫字母,a, b, c... */ list-style-type: upper-alpha; /* 大寫字母,A, B, C... */ }
list-style-image
屬性用于自定義列表標記的圖片,屬性值是指向圖片文件路徑的URL。
list-style-position
屬性用于定義列表標記的位置,能取的值為inside
和outside
,默認為outside
,即標記在列表內容的左側。
除了以上屬性以外,我們還可以使用::marker
偽元素來進一步自定義列表項標記的樣式。
下面是一個示例,展示了如何使用list-style
屬性和::marker
偽元素來定義自定義列表樣式:
<ul class="mylist"> <li>這是第一項</li> <li>這是第二項</li> <li>這是第三項</li> </ul> .mylist { list-style: circle; } .mylist li::marker { content: "●"; /* 使用實心圓點作為標記 */ color: red; /* 標記顏色為紅色 */ }