我們平時經常用到列表（ul和ol）,常常都是用:before和:after為列表項添加一些輔助的樣式，比如左右箭頭，上下箭頭，上下三角和一些純屬裝飾不帶功能的效果。其實你仔細看看list-style-type的值，你會有驚喜喲。

list-style-type的值

css3之前的版本，這個屬性的值就有20來個值:
list-style-type：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin。
css3又新加了不少值，好像也有30-40來個，隨便列舉一些：
'disclosure-closed','disclosure-open','cjk-decimal','cjk-ideographic','hiragana','katakana','hiragana-iroha','katakana-iroha','japanese-informal','japanese-formal','korean-hangul-formal','korean-hanja-informal','korean-hanja-formal','simp-chinese-informal','simp-chinese-formal','trad-chinese-informal','trad-chinese-formal','cjk-heavenly-stem','cjk-earthly-branch','japanese-informal','japanese-formal','arabic-indic','persian','urdu','devanagari','gurmukhi','gujarati','oriya','kannada','malayalam','bengali','tamil','telugu','thai','lao','myanmar','khmer','hangul','hangul-consonant','ethiopic-halehame','ethiopic-numeric','ethiopic-halehame-am','ethiopic-halehame-ti-er','ethiopic-halehame-ti-et','other-style','outside','inside'。
你可以去[css 3 test]...(http://css3test.com/)里看看，要滾好幾頁才能看完的。該值涉及范圍也是很廣的，包括：實心圓點，空心圓點，實心方塊，十進制數字（不帶0的：1,2,3...和帶0的：01,02,03...），大小寫羅馬數字（ i, ii, iii, iv, v…和I, II, III, IV, V…），希臘數字（α, β, γ…），大小寫字母（a,b,c...和A,B,C...）,漢文數字（一，二，三...），大寫數字（壹，貳，叁...），天干（甲，乙，丙...），地支（子，丑，寅...），左三角，下三角，國外的一些排序符號等等。

list-style-type的值的兼容性。

先看看mdn的，好有個大致的印象。

mdn.png

1.png

2.png

list-style-type的值的分類

• 常值 ，如：'none','circle','disc','square','armenian','cjk-ideographic','decimal','decimal-leading-zero'
• 自定義的值，如：'＋'，'-'，'×'，'<' ,'>'
• symbols定義的值，如：symbols("*" "\2020" "\2021" "\A7")，symbols(cyclic '*' '\2020' '\2021' '\A7')
• counter-style-name

注：(建議用firefox瀏覽器查看效果)示例代碼，可點此查看，另外@count-style相關用法可參考CSS Counter Style試玩兒

參考：

• css3 test
• list-style-type
• CSS參考手冊