详解：21 计数器

最新推荐文章于 2023-12-11 18:46:36 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2023-12-11 18:46:36 发布

阅读量1k

点赞数 1

分类专栏： CSS3最详解

本文链接：https://blog.csdn.net/qq_37805832/article/details/105768042

版权

CSS3最详解专栏收录该内容

54 篇文章 1 订阅

订阅专栏

核心：counter-reset意思：定义变量，一个变量对应一个值，不写值默认为0 变量名值变量名值记住啊，不需要,写,就错了！！！写,代表终止了哈
counter-increment意思：累加，也就是说每次加几，不写默认+0
content意思：内容，也就是说文字
counter意思：用来显示计数器的结果的啊
记住：counter()函数必须和content属性一起使用
记住，核心思想为累加，一次累加+又一次累加。。。。。
核心：css不需要连接符，是字符串就直接""或者’’
记住，核心多一个li就多一次累加，直到没有li为止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .test1
        {
            counter-reset: section;/*section是变量名值不写是0*/
        }
        .test1 h3:before
        {
            counter-increment: section;/*懂了每次加0*/
           content: "第"counter(section)"章";/*获取计数器数据把*/
        }
        .test2
        {
            counter-reset: c1 1 c2 10;
        }
        .test2 h3:before
        {
            counter-increment: c1 2 c2 5;
            content: "第"counter(c1)"章--第"counter(c2)"节";
        }
       .test3
        {
            counter-reset: c3 0;
        }
        .test3 li:before
        {
            counter-increment: c3 -1;
            content: counter(c3);
        }
 </style>
</head>
<body>
    <div class="test1">
        <h3>李文</h3>
        <h3>李文</h3>
        <h3>李文</h3>
        <h3>李文</h3>
    </div>
    <div class="test2">
        <h3>李文</h3>
        <h3>李文</h3>
        <h3>李文</h3>
        <h3>李文</h3>
    </div>
    <div class="test3">
       <li>李文</li>
       <li>李文</li>
       <li>李文</li>
       <li>李文</li>
    </div>
</body>
</html>

在这里插入图片描述

贵哥的编程之路(热爱分享)

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
详解：21 计数器

核心：counter-reset意思：定义变量，一个变量对应一个值，不写值默认为0 变量名值变量名值记住啊，不需要,写,就错了！！！写,代表终止了哈counter-increment意思：累加，也就是说每次加几，不写默认+0content意思：内容，也就是说文字counter意思：用来显示计数器的结果的啊记住：counter()函数必须和content属性一起使用记住，...
复制链接

扫一扫