css如何动态累计数字?

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

1、伪元素

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

2、计数器

2.1 初始化

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

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

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

counter-increment 计数器累加;

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

counter-increment: chapter; /*累加,默认增量为 1*/
counter-increment: chapter 2; /*累加,增量为 2 */
2.3 计数器函数

counter() 计数器累计;

格式:
counter(计数器的名字, [可选type,同list-style-type])
第一个参数计数器的名字,必须与counter-reset和counter-increment中计数器的名字一致

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

3、简单示例

3.1 一个计数器运用: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>

3.2 多个计数器运用: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>

4、补充: list-style-type 属性值

描述
none无标记。
disc默认。标记是实心圆。
circle标记是空心圆。
square标记是实心方块。
decimal标记是数字。(1,2,3,4,等。)
decimal-leading-zero0开头的数字标记。(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, 等。(日文片假名序号)
  • 25
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值