css -- counter计数

最新推荐文章于 2024-06-25 11:27:04 发布

某些开发

最新推荐文章于 2024-06-25 11:27:04 发布

阅读量498

点赞数

分类专栏：网页与布局

本文链接：https://blog.youkuaiyun.com/weixin_43964866/article/details/113548113

版权

网页与布局专栏收录该内容

11 篇文章

订阅专栏

一、计数器铁三角
二、使用规则

一、计数器铁三角

css计数器只能跟content属性一起才有作用，content属性是在before/after伪元素上的。
形成 “计数器 — 伪元素 — content属性” 铁三角关系。

二、使用规则

关键点：

计数器名称 counter-reset
计数器增长规则 counter-increment
开始报数 counter()/counters()

1. counter-rest

（计数器重置）

第一个参数，给计数器起个名字
第二个参数，计数器开始的数字，默认0
支持负数和小数，

例1：基本用法，在段落前面加一个序号

<style>
     .body {counter-reset: demo;}
     .body::before {content: counter(demo);  }
</style>

<body>

    <div class="body">一些测试文字</div>

</body>

效果：
在这里插入图片描述

例2 ：设置第二个参数，起始值

<style>
      .body {counter-reset: demo 2; }
      .body::before { content: counter(demo);}
</style>

<body>

    <div class="body">一些测试文字</div>

</body>

效果：
在这里插入图片描述

例3 ：多个计数器同时命名（一个从基数是1，一个基数是10）

在这里插入图片描述
效果：

2. counter-increment

（计数器-递增）

值为计数器一个或多个关键字（名称）
第二个参数为计数变化值（每次递增值），默认为1

例1：基本使用，默认自增1

在这里插入图片描述
效果：

例2：第二个参数设置，自增3

（基数从3开始，并自增3）
在这里插入图片描述
效果：

2.1 自增长也可以放在伪元素上：

（结果同上）
在这里插入图片描述

2.2 自增长分别放在元素和伪元素上的情况？

分别都计算一次
只要有counter-increment,对应的计数器的值就会变化

效果：

2.3 多个increment

counter-rest 可以一次命名多个，increment也有与之呼应的设定

在这里插入图片描述
效果：

2.4 父与子increment组合

计数器的数值变化遵循HTML渲染顺序，遇到一个increment计数器就变化，什么时候counter输出就输出此时的计数值
在这里插入图片描述
效果：

在这里插入图片描述

3. counter()

是方法不是属性，类似calc()
作用就是显示计数
语法：counter(name,style)
/* name: 计数器名称
style: 就是支持list-style-type 支持的那些值
*/

例1：罗马数字和0开头的数字标记

在这里插入图片描述
效果：

例2：counter还支持级联

一个content属性值可以有多个counter()方法。

效果：

4. counters()

嵌套计数
子序号
语法：counters(name， string，style)
string参数为字符串（需要引号），表示子序号的连接字符串
例如1.1的string就是’.’, 1-1就是’-’.
我们平时的序号，不可能就只是1,2,3,4,…, 还会有诸如 1.1,1.2,1.3,…等的子序号。得，前者就是counter()干的事情，后者就是counters()干的事情

<style>
        .reset {
            counter-reset: demo;
            padding-left: 20px;
        }

        .counter {
            color: #666;
            margin-bottom: 10px;
            line-height: 28px;
        }

        .counter::before {
            content: counters(demo, "-")". ";
            counter-increment: demo;
            font-weight: bold;
        }
 </style>
<body>

    <div class="reset">
        <div class="counter">
            爷爷一
            <div class="reset">
                <div class="counter">大伯父</div>
                <div class="counter">爸爸
                    <div class="reset">
                        <div class="counter">孩子一</div>
                        <div class="counter">孩子二
                            <div class="reset">
                                <div class="counter">孙子一</div>
                                <div class="counter">孙子二</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="counter">
            爷爷二
        </div>
        <div class="counter">
            爷爷三
            <div class="reset">
                <div class="counter">大伯父</div>
                <div class="counter">大伯父
                    <div class="reset">
                        <div class="counter">大儿子</div>
                        <div class="counter">小儿子</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

效果：
在这里插入图片描述