type test css,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试玩儿

参考：

作者：恬雅过客

链接：https://www.jianshu.com/p/491557c2e5c4