使用CSS定义有序列表的序号

在推特上看见一位推友问:

网页中的有序列表 <li> 不能自定义编号(例如变成中文一、二、...)

实现方法

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

1
2
3
4
5
6
7
8
9
10
11
<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 还是不满意,那也完全可以自己定义一种序号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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