css如何动态累计数字？

news2024/10/7 9:22:08

导读：css如何动态累计数字？用于章节目录的序列数生成，用css的计数器实现起来比 js方式更简单！

伪元素

::after ::before伪元素设置content 可以在元素的首部和尾部添加内容，我们要在元素的首部添加序列号，所以要用到的是::before的content 属性

计数器

counter-reset 初始化或重置计数器的值；

格式：
counter-reset: 计数器的名字 [可选，计数器初始值]

counter-reset: chapter;   /*初始化 默认初始值为0*/
counter-reset: chapter 1; /*初始化 初始值为1*/
counter-reset: chapter item mini; /*初始化多个计数器*/

counter-increment 计数器累加；

格式：
counter-increment: 计数器的名字 [可选，计数器增量值]

counter-increment: chapter; /*累加，默认增量为 1*/
counter-increment: chapter 2; /*累加，增量为 2 */

counter() 计数器累计；

格式：
counter(计数器的名字, [可选type，同list-style-type])

.chapter h2::before {
    content: counter(chapter, cjk-ideographic); /*第一个参数计数器的名字，必须与counter-reset和counter-increment中计数器的名字一致*/
 }

简单示例：

一个计数器运用：chapter

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        counter-reset: chapter;
      }
      ul {
        margin: 20px;
        padding: 0;
      }
      ul li {
        list-style-type: none;
        padding: 2px 0px;
      }

      .chapter {
        counter-reset: item;
        counter-increment: chapter;
      }
      .chapter h2::before {
        content: '第' counter(chapter, cjk-ideographic) '章、';
      }
    </style>
  </head>
  <body>
    <div class="chapter">
      <h2>章节内容</h2>
      <ul class="sendSeq">
        <li>
          段落内容
          <ul class="mini">
            <li>项目小结</li>
            <li>项目小结</li>
          </ul>
        </li>
        <li>段落内容</li>
        <li>段落内容</li>
      </ul>
    </div>
    <div class="chapter">
      <h2>章节内容</h2>
      <ul class="sendSeq">
        <li>
          段落内容
          <ul class="mini">
            <li>项目小结</li>
            <li>项目小结</li>
          </ul>
        </li>
        <li>段落内容</li>
        <li>段落内容</li>
      </ul>
    </div>
  </body>
</html>

多个计数器运用：chapter item mini

在这里插入图片描述

 <style>
      body {
        counter-reset: chapter item mini;
      }
      ul {
        margin: 20px;
        padding: 0;
      }
      ul li {
        list-style-type: none;
        padding: 2px 0px;
      }
      .chapter {
        counter-reset: item;
        counter-increment: chapter;
      }
      .chapter h2::before {
        content: '第' counter(chapter, cjk-ideographic) '章、';
      }

      .sendSeq li {
        font-size: 18px;
        counter-increment: item;
      }

      .sendSeq li::before {
        content: counter(chapter) '.' counter(item) ' ';
      }

      .mini {
        counter-reset: mini;
      }
      .mini li {
        font-size: 14px;
        counter-increment: mini;
      }

      .mini li::before {
        content: counter(chapter) '.' counter(item) '.' counter(mini) ' ';
      }
    </style>

补充： list-style-type 属性值

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。（1,2,3,4,等。）
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字（一，二，三，四，等。）
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号）