使用CSS定义有序列表的序号 | 🍀光照进来的地方

password

type

status

date

slug

summary

实现方法

看到这里第一反应是 css 中不是有个 list-style-type 就干这个的吗？难道不行？于是查了下 MDN, 果然是可以的，于是尝试一下

1234567891011

<style> .origin { list-style-type: simp-chinese-informal; }</style><ol class="origin"> <li>春眠不觉晓</li> <li>处处闻啼鸟</li> <li>夜来风雨声</li> <li>花落知多少</li></ol>

在 chrome 下显示为:

list-style-image

看起来貌似是可以的，只不过这个属性值目前有一些是实验中的状态，不一定所有浏览器都兼容(其实也就 IE 不支持，IE 都已经入土了)。

有趣的命名

除此之外，list-style-type 还支持很多其他的属性，其中有几个属性显得尤为有趣：

cjk-decimal, cjk-ideographic, japanese-informal, korean-hanja-informal, trad-chinese-informal 在个位时都是 一、二、三...。 korean-hanja-formal, simp-chinese-formal, trad-chinese-formal 在个位时都是 壹、贰、叁...。

按照这种命名方式是不是就意味着 chinese, japanese, korean 的非正式序号其实都是简体汉字的 一、二、三...? 然后大家的正式序号还都是繁体汉字的 壹、贰、叁... ?

神奇的类型

其中有个叫 cjk-earthly-branch 的类型，结果是 子、丑、寅...，原来这是地支序号啊！有了地支，也得有天干啊，还真找到了，叫做 cjk-heavenly-stem，显示结果是 甲、乙、丙...。我寻思着天干、地支每样也就 12 个啊，超过了咋办？好家伙，被实现惊到了，天干地支的序号是 12 进制的，超过 12 后，会采用 子子、子丑、子寅... 这样的序号，不得不佩服。

超级杀招

如果你对这些内置的 list-style-type 还是不满意，那也完全可以自己定义一种序号

123456789101112131415161718192021222324252627282930

<style> @counter-style circled-simp-chinese-informal { system: additive; suffix: " "; additive-symbols: ㊉ 10, ㊈ 9, ㊇ 8, ㊆ 7, ㊅ 6, ㊄ 5, ㊃ 4, ㊂ 3, ㊁ 2, ㊀ 1; } .origin { list-style: circled-simp-chinese-informal; }</style><ol class="origin"> <li>春眠不觉晓</li> <li>处处闻啼鸟</li> <li>夜来风雨声</li> <li>花落知多少</li> <li>春眠不觉晓</li> <li>处处闻啼鸟</li> <li>夜来风雨声</li> <li>花落知多少</li> <li>春眠不觉晓</li> <li>处处闻啼鸟</li> <li>夜来风雨声</li> <li>花落知多少</li> <li>春眠不觉晓</li> <li>处处闻啼鸟</li> <li>夜来风雨声</li> <li>花落知多少</li></ol>

最终将得到一个这样的有序列表

customize-counter-style

实现方法

有趣的命名

神奇的类型

超级杀招

李威俊

交流频道

加入我们的社群讨论分享