css自定义有序列表


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>
  • 君不见,黄河之水天上来,奔流到海不复回
  • 君不见,高堂明镜悲白发,朝如青丝暮成雪
  • 人生得意须尽欢,莫使金樽空对月
  • 天生我材必有用,千金散尽还复来
  • 烹羊宰牛且为乐,会须一饮三百杯
  • 岑夫子,丹丘生,将进酒,杯莫停
  • 与君歌一曲,请君为我倾耳听
  • 钟鼓馔玉不足贵,但愿长醉不愿醒
  • 古来圣贤皆寂寞,惟有饮者留其名
  • 陈王昔时宴平乐,斗酒十千恣欢谑
  • 主人何为言少钱,径须沽取对君酌
  • 五花马,千金裘,呼儿将出换美酒,与尔同销万古愁

  目录