css 实现丰富的序号效果

news2025/11/1 10:05:19

<ol>
  <li>
    <p>日本新潟佐渡岛</p>
  </li>
  <li>
    <p>宣告“飞岛萱草”</p>
    <ol>
      <li>
        <p>迎来最佳观赏期。</p>
        <ol>
          <li>
            <p>据观光协会介绍，</p>
          </li>
          <li>
            <p>这是一种仅在</p>
          </li>
        </ol>
      </li>
      <li>
        <p>佐渡岛与山形县部分地区开花的</p>
      </li>
    </ol>
  </li>
  <li>
    <p>百合科多年生草本植物。</p>
  </li>
</ol>

默认序号效果：

在这里插入图片描述

list-style-type 改变序号类型

li {
   list-style-type: cjk-ideographic;
 }

在这里插入图片描述
list-style-type 支持不少类型：

1.2.3 decimal
a.b.c lower-alpha
A.B.C upper-alpha
i.ii.iii lower-roman
I.II.III upper-roman
一.二.三 cjk-ideographic
子.丑.寅.卯 cjk-earthly-branch
甲.乙.丙.丁 cjk-heavenly-stem

@counter-style 自定义序号类型

@counter-style circled-upper-alpha {
  system: alphabetic;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  prefix: "(";
  suffix: ").";
}
li {
  list-style-type: circled-upper-alpha;
}

在这里插入图片描述

counters 多级序号

ol {
  counter-reset: my-counter;
}
li {
  counter-increment: my-counter;
}
li::marker {
  content: counters(my-counter, "-") ". ";
}

在这里插入图片描述

使用 counters 时可以指明 counter-style：

@counter-style circled-upper-alpha {
  system: alphabetic;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  /* content: counter() 中，prefix 和 suffix 不生效 */
  prefix: "(";
  suffix: ").";
}
ol {
  counter-reset: my-counter;
  /* list-style: circled-upper-alpha; */
}
li {
  counter-increment: my-counter;
}
li::marker {
  content: "~* " counters(my-counter, "-", circled-upper-alpha) " *~";
}