使用 CSS 计数器

guqiu 发布于2019-08-30 14:14 / 1050人阅读

摘要：使用计数器计数器本质上是维护的变量，这些变量可以根据规则增加以跟踪使用次数。有网友利用计数器制作文档的列表序号排序，也有网友利用计数器伪类元素制作更华丽的效果。使用计数器语法命名变量并定义计数器的值，默认为。注意计数器只跟属性使用才有效。

使用 CSS 计数器

CSS 计数器本质上是 CSS 维护的变量，这些变量可以根据 CSS 规则增加以跟踪使用次数。

那么关于 CSS 计数器的使用，就需要读者智者见智了。有网友利用计数器制作文档的列表序号排序，也有网友利用计数器 + 伪类元素制作更华丽的效果。

使用计数器 语法

1.命名变量并定义计数器的值，默认为 0。

counter-reset: varname;

递增计数器的值，默认增量为 1。

counter-increment: varname;

counter() / counters() 方法显示计数。

counter(varname);

注意

CSS 计数器只跟 content 属性使用才有效。

相关用法 如何自定义 counter-reset 默认值

counter-reset: varname number;

允许设置为负值，也允许设置为小数（ 仅 Chrome 支持）。同时，也支持多个变量同时定义：

counter-reset: varname1 number varname2 number varname3 number;

参考代码 点击按钮计数

HTML

CSS

.box
{
    counter-reset: num;
}

input:checked
{
    counter-increment: num;
}
input:checked:before
{
    content: counter(num);
}

文章序号自动递增

HTML


    文章目录标题1
    文章目录标题2
    文章目录标题3
    文章目录标题4
    文章目录标题5

CSS

.box
{
    counter-reset: num;
}

h1
{
    counter-increment: num;
}
h1:before
{
    content: counter(num);
}

文章序号嵌套递增

HTML


    文章目录标题
        文章目录副标题
    文章目录标题
        文章目录副标题
        文章目录副标题
    文章目录标题
        文章目录副标题
        文章目录副标题
        文章目录副标题
    文章目录标题
        文章目录副标题
        文章目录副标题
        文章目录副标题
        文章目录副标题
    文章目录标题
        文章目录副标题
        文章目录副标题
        文章目录副标题
        文章目录副标题
        文章目录副标题

CSS

.box
{
    counter-reset: num;
}

h1
{
    counter-reset: subnum;
    counter-increment: num;
}
h1:before
{
    content: counter(num);
}

h2
{
    counter-increment: subnum;
}
h2:before
{
    content: counter(num)"."counter(subnum);
}

结语

在上面的案例及分享中，其实讲到的东西非常少。想要更深了解 CSS 计数器的读者，可以阅读张鑫旭先生这篇《CSS counter计数器(content目录序号自动递增)详解》。

GPU云服务器云服务器 css使用 css的使用 css如何使用怎么使用css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115870.html

如何使用纯 CSS 制作四子连珠游戏

摘要：序言你是否想过单纯使用也可以制作一款游戏甚至可以双人对决这是一篇非常有趣的文章，作者详细讲解了使用纯制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。在本文中，我将介绍使用纯制作的四子连珠游戏的关键思想。序言：你是否想过单纯使用 CSS 也可以制作一款游戏？甚至可以双人对决！这是一篇非常有趣的文章，作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问...

I_Am 2019-08-02 16:05 评论0 收藏0
如何使用纯 CSS 制作四子连珠游戏

摘要：序言你是否想过单纯使用也可以制作一款游戏甚至可以双人对决这是一篇非常有趣的文章，作者详细讲解了使用纯制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。在本文中，我将介绍使用纯制作的四子连珠游戏的关键思想。序言：你是否想过单纯使用 CSS 也可以制作一款游戏？甚至可以双人对决！这是一篇非常有趣的文章，作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问...

waltr 2019-08-29 16:43 评论0 收藏0
伪元素 ::after 和 ::before 应该这么用（一）

摘要：伪元素被当做的样式来进行展现，用法和普通的元素用法是一样的。中的伪元素使用个冒号，在中，为了区分伪类和伪元素，规定伪元素使用个冒号。伪元素的特点优点不占用节点，减少节点数。不仅块级元素可以设置伪元素，大部分行级元素也可以。 1 什么是伪元素？ CSS 在渲染文档的时候，伪元素可以通过 css 给 HTML 添加一个元素（叫标签也行），这个元素在文档树中是找不到的。伪元素被当做 CSS ...

BlackMass 2019-08-30 15:54 评论0 收藏0
带你了解css计数器——counters

摘要：语法格式，中的是和中元素所支持的的值，也就是你可以将显示为罗马数字则是表示可以使用指定的字符串将计数器连接起来。第一次了解到这个css是因为代码高亮-prismj中行号显示的实现。 showImg(https://segmentfault.com/img/remote/1460000011457180?w=348&h=244); 当时很好奇前面的行号是如何实现的，一探究竟原来非常简单...

fuyi501 2019-08-30 15:53 评论0 收藏0
CSS魔法堂：一起玩透伪元素和Content属性

摘要：前言继上篇魔法堂稍稍深入伪类选择器记录完伪类后，我自然而然要向伪元素伸出魔掌的啦。和的注意事项默认必须设置属性，否则一切都是无用功默认，就是和的内容无法被用户选中的伪元素和伪类结合使用形如。前言继上篇《CSS魔法堂：稍稍深入伪类选择器》记录完伪类后，我自然而然要向伪元素伸出魔掌的啦^_^。本文讲讲述伪元素以及功能强大的Contet属性，让我们可以通过伪元素更好地实现更多的可能！ ...

DevTalking 2019-08-30 15:54 评论0 收藏0