css自定义有序列表

CSS

发布日期: 2023-09-13

更新日期: 2023-09-13

文章字数: 2.4k

阅读时长: 10 分

阅读次数:

CSS 属性 list-style-type

list-style-type可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）, 默认为disc实心圆点
参考MDN

常见属性

none 不显示

<ul style="list-style-type: none;">
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
</ul>

白日依山尽
黄河入海流
欲穷千里目
更上一层楼

disc 实心圆(默认)

<ul style="list-style-type: disc;">
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
</ul>

白日依山尽
黄河入海流
欲穷千里目
更上一层楼

circle 空心圆

<ul style="list-style-type: circle;">
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
</ul>

白日依山尽
黄河入海流
欲穷千里目
更上一层楼

square 实心方块

<ul style="list-style-type: square;">
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
</ul>

白日依山尽
黄河入海流
欲穷千里目
更上一层楼

decimal 十进制阿拉伯数字

<ul style="list-style-type: decimal;">
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
</ul>

白日依山尽
黄河入海流
欲穷千里目
更上一层楼

cjk-decimal 十进制数大写

<ul style="list-style-type: cjk-decimal;">
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
</ul>

白日依山尽
黄河入海流
欲穷千里目
更上一层楼

decimal-leading-zero 十进制阿拉伯数字(个位数前面补零)

<ul style="list-style-type: decimal-leading-zero;">
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
</ul>

白日依山尽
黄河入海流
欲穷千里目
更上一层楼

lower-roman 小写的罗马数字

<ul style="list-style-type: lower-roman;">
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
</ul>

白日依山尽
黄河入海流
欲穷千里目
更上一层楼

upper-roman 大写的罗马数字

<ul style="list-style-type: upper-roman;">
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
</ul>

白日依山尽
黄河入海流
欲穷千里目
更上一层楼

其他
- lower-greek 小写古典希腊文
- lower-alpha, lower-latin 小写ASCII字母
- upper-alpha, upper-latin 大写ASCII字母
- 其他非常用的属性值：语法取值

特殊属性

取值为 cjk-decimal, cjk-ideographic, japanese-informal, korean-hanja-informal, trad-chinese-informal时，个位都是一、二、三…
```
<ul style="list-style-type: cjk-decimal;">
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
</ul>
```
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
取值为 korean-hanja-formal, simp-chinese-formal, trad-chinese-formal时，个位都是壹、贰、叁…
```
<ul style="list-style-type: simp-chinese-formal;">
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
</ul>
```
- 白日依山尽
- 黄河入海流
- 欲穷千里目
- 更上一层楼
cjk-earthly-branch：子、丑、寅…（地支序号）
- 地支超过十二时会自动排序：子子、子丑、子寅…（天干同理）
```
<ul style="list-style-type: cjk-earthly-branch;">
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
</ul>
```
  - 白日依山尽
  - 黄河入海流
  - 欲穷千里目
  - 更上一层楼

cjk-heavenly-stem：子、丑、寅…（天干序号）

<ul style="list-style-type: cjk-heavenly-stem;">
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
</ul>

白日依山尽
黄河入海流
欲穷千里目
更上一层楼

自定义序号

自定义数字

<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>
<ul 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>
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
  <li>白日依山尽</li>
  <li>黄河入海流</li>
  <li>欲穷千里目</li>
  <li>更上一层楼</li>
</ul>

白日依山尽
黄河入海流
欲穷千里目
更上一层楼
白日依山尽
黄河入海流
欲穷千里目
更上一层楼
白日依山尽
黄河入海流
欲穷千里目
更上一层楼
白日依山尽
黄河入海流
欲穷千里目
更上一层楼
白日依山尽
黄河入海流
欲穷千里目
更上一层楼
白日依山尽
黄河入海流
欲穷千里目
更上一层楼

自定义表情

<style>
  @counter-style emoji-test {
    system: additive;
    suffix: " ";
    additive-symbols: 😍 10, 😜 9, 😂 8, 😅 7, 😁 6, 🙂 5, 😐 4, 🙁 3, 😨 2, 😭 1;
  }
  .emoji {
    list-style: emoji-test;
  }
</style>
<ul class="emoji">
  <li>君不见，黄河之水天上来，奔流到海不复回</li>
  <li>君不见，高堂明镜悲白发，朝如青丝暮成雪</li>
  <li>人生得意须尽欢，莫使金樽空对月</li>
  <li>天生我材必有用，千金散尽还复来</li>
  <li>烹羊宰牛且为乐，会须一饮三百杯</li>
  <li>岑夫子，丹丘生，将进酒，杯莫停</li>
  <li>与君歌一曲，请君为我倾耳听</li>
  <li>钟鼓馔玉不足贵，但愿长醉不愿醒</li>
  <li>古来圣贤皆寂寞，惟有饮者留其名</li>
  <li>陈王昔时宴平乐，斗酒十千恣欢谑</li>
  <li>主人何为言少钱，径须沽取对君酌</li>
  <li>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁</li>
</ul>