码迷,mamicode.com
首页 > Web开发 > 详细

使用 CSS 计数器

时间:2020-06-04 21:44:16      阅读:70      评论:0      收藏:0      [点我收藏+]

标签:rem   语法   name   css   auto   ice   递增   才有   如何   

使用 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

<div class="box">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>

CSS

.box
{
    counter-reset: num;
}

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

文章序号自动递增

HTML

<div class="box">
    <h1>文章目录标题1</h1>
    <h1>文章目录标题2</h1>
    <h1>文章目录标题3</h1>
    <h1>文章目录标题4</h1>
    <h1>文章目录标题5</h1>
</div>

CSS

.box
{
    counter-reset: num;
}

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

文章序号嵌套递增

HTML

<div class="box">
    <h1>文章目录标题</h1>
        <h2>文章目录副标题</h2>
    <h1>文章目录标题</h1>
        <h2>文章目录副标题</h2>
        <h2>文章目录副标题</h2>
    <h1>文章目录标题</h1>
        <h2>文章目录副标题</h2>
        <h2>文章目录副标题</h2>
        <h2>文章目录副标题</h2>
    <h1>文章目录标题</h1>
        <h2>文章目录副标题</h2>
        <h2>文章目录副标题</h2>
        <h2>文章目录副标题</h2>
        <h2>文章目录副标题</h2>
    <h1>文章目录标题</h1>
        <h2>文章目录副标题</h2>
        <h2>文章目录副标题</h2>
        <h2>文章目录副标题</h2>
        <h2>文章目录副标题</h2>
        <h2>文章目录副标题</h2>
</div>

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目录序号自动递增)详解》

使用 CSS 计数器

标签:rem   语法   name   css   auto   ice   递增   才有   如何   

原文地址:https://www.cnblogs.com/jlfw/p/13045797.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!