CSS 清單屬性：項目符號的樣式與位置
清單樣式主要是用來控制 HTML 中 <ul> 與 <ol> 的外觀。
list-style-type
設定清單符號的類型。
無排序
disc: 圓形實心，預設值。circle: 圓形空心。square: 方形。none: 無。☂: 自訂清單符號。
有排序
decimal: 編號，預設值。upper-alpha: 大寫英文字母，預設值。lower-alpha: 小寫英文字母，預設值。
list-style-image
使用影像作為清單符號。不過，無法控制影像的大小與調整距離。因此，使用率不高。
list-style-position
設定清單符號的位置。
outside: 清單符號位於清單項目文字的外部，文字會從符號後開始對齊，預設值。inside: 清單符號位於清單項目文字的內部，符號會與文字一起縮排。
常見寫法
css
/* 導覽列：拿掉符號與預設縮排 */
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}
/* 自訂符號：移除預設後用偽元素自己畫 */
.check-list li {
list-style: none;
position: relative;
padding-left: 1.5em;
}
.check-list li::before {
content: "✓";
position: absolute;
left: 0;
color: #16a34a;
}用 偽元素 自己畫，顏色、大小與間距都能完全控制。
小提醒
把 list-style 設成 none 之後，部分瀏覽器不再把它視為清單朗讀。導覽列這類重要區塊，可視需要補上對應的角色屬性。清單的語意說明可參考 列表清單。
常見問題
怎麼把清單的圓點拿掉？
把 list-style 設成 none 即可，導覽列與卡片列表幾乎都會這樣做。要注意有些瀏覽器會因此不再把它視為清單朗讀，必要時補上對應的角色屬性。
inside 和 outside 差在哪？
outside 是預設值，符號放在內容區塊之外，換行時文字會對齊；inside 把符號放進內容區塊，換行後的文字會跑到符號下方。
可以自訂項目符號嗎？
可以用圖片，但更常見的做法是移除預設符號後，改用 偽元素 自己畫，這樣顏色、大小與間距都能完全控制。
編號可以自己控制嗎？
HTML 端可以用 start 與 reversed 屬性；CSS 端則能用計數器自行累加，做出多層章節編號這類效果。
