list-style-type 中 disc 和 circle 的區別在于視覺效果和使用場景。1.disc 是實心圓點，默認用于常規列表，對比度高、醒目易見，適合主內容區要點；2.circle 是空心圓，視覺較輕，常用于嵌套或輔助信息，區分層級結構；3.選擇時應根據內容重要性和設計風格決定，通常一級列表用 disc，子列表用 circle，以增強可讀性與層次感。
在css中，list-style-type 屬性用來控制無序列表（
- ）中列表項標記的樣式。其中 disc 和 circle 是兩個常用的值，它們看起來相似，但視覺效果和使用場景略有不同。
- 實心圓點更容易吸引注意力
- 在淺色背景上對比度高，清晰可見
- 是很多網站和框架的默認選擇
- 空心圓視覺上“輕”一些
- 更適合出現在子級列表或說明性內容中
- 可以和父級的 disc 區分開來，增強結構層次
disc：實心圓點更常見
默認情況下，瀏覽器會將
- 列表的 list-style-type 設置為 disc，也就是一個實心的小圓點。這個樣式比較醒目，適合大多數網頁內容中的常規列表。
比如你寫一段html：
立即學習“前端免費學習筆記（深入）”；
<ul> <li>項目一</li> <li>項目二</li> </ul>
不加任何樣式的情況下，瀏覽器就會用 disc 樣式顯示列表項前的小圓點。
circle：空心圓更適合嵌套或輔助信息
與 disc 不同，circle 顯示的是一個空心圓圈。它的視覺存在感稍弱一些，因此常用于嵌套列表或者作為次要信息的標識。
比如你想讓二級列表看起來不太搶眼，可以這樣設置：
ul ul { list-style-type: circle; }
這樣內層列表就會用空心圓顯示，和外層的實心圓形成區分。
如何選擇？看用途和設計風格
具體選哪個更好，其實取決于你的頁面風格和內容層級需求。
如果你希望突出列表項，尤其是在主內容區的要點說明，那用 disc 比較穩妥。它清晰、直接，不容易被忽略。
而如果你是在做二級菜單、備注信息、細節描述等需要弱化處理的內容，那么 circle 更合適，不會喧賓奪主。
當然，這兩個屬性也可以混著用，比如一級列表用 disc，子列表用 circle，這樣能幫助用戶理解內容結構。
基本上就這些。兩種樣式區別不大，但在實際布局中合理運用，可以讓頁面看起來更有條理。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
