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