CSS3 Test: list-style-type

我们平时经常用到列表（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

然后，css 3 test这个网站可以看到该浏览器对css3新增的值得兼容性。你可以自己用电脑或手机打开看看，就能很清楚的看到。
我电脑上chrome 59.0.3071.115,大部分绿的，有10多个红的（不支持的）。

1.png

firefox 54.0.1 里全绿。

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参考手册

作者：恬雅过客
链接：https://www.jianshu.com/p/491557c2e5c4