肉渣教程

CSS 计数器

上一节 下一节

通过CSS计数器对元素自动编号

CSS中的计数器(counters)类似变量;变量的取值可以根据预设的CSS规则进行递加。为了实现CSS计数器的功效,会涉及下述相关属性:

  • counter-reset- 新建或重设一个计数器
  • counter-increment - 设定指定计数器的每次递加的值(取值为整数,默认为1)
  • content - 生成用于插入的内容
  • counter()counters()函数 - 返回指定计数器此刻的数值

备注:在使用CSS计数器务必先声明一个计数器,即使用counter-reset

body {
    counter-reset: fuck_weapon;
}

h3::before {
    counter-increment: fuck_weapon;
    content: "兵器谱排名第" counter(fuck_weapon) ":";
}

运行一下


上例中的fuck_weapon只是给计数器设置的一个名字,可以自由定义,不必拘谨。


详解counter-reset

如下方代码所示,counter-reset的机制是每当遇到符合下方选择器的元素时,则指定计数器reset归零

div {
    counter-reset: fuck_weapon;
}

运行一下

详解counter-increment

counter-increment设定指定计数器每次递加的值,这是必须设置,但是定增的值可以不声明,因为会默认为1;如要手动声明,在传入的第二个参数设置即可,可以为正整数,也可以为负整数,但是必须为整数。具体如下所示:

body {
    counter-reset: fuck_weapon;
}

h3::before {
    counter-increment: fuck_weapon 100; /* 这里设置每次递增的值 */
    content: "兵器谱排名第" counter(fuck_weapon) ":";
}

运行一下

复合计数器

上面那只是一个简单的例子,如果在没一项中继续添加一组也需要计数的子项,则会涉及多个CSS计数器的复合使用。

body {
    counter-reset: fuck_weapon;
}

h3 {
    counter-reset: progeny;
}

h3::before {
    counter-increment: fuck_weapon;
    content: "兵器谱排名第" counter(fuck_weapon) ":";
}

h4::before {
    counter-increment: progeny;
    content: counter(fuck_weapon) "." counter(progeny) " ";
}

运行一下

counters()函数

上面用了counter()函数,下面要用counters()函数来搞事,这个函数需要传入两个参数,如下所示:

counters( 计数器名称, "自定义的字符或字符串" )

自定义的字符或字符串是用来作为分割符号,因为这个函数返回的结果可能是不只一个计数器的数值,因为元素的嵌套,很可能此时该元素下,涉及不只一个同名的计数器,因此返回的结果可能不只一个,而自定义的分割符号就是用来放在不同返回数值之间的。

ol {
    counter-reset: section;
    list-style-type: none;
}

li::before {
    counter-increment: section;
    content: counters(section,".") " ";
}

运行一下


CSS 计数器

上一节 下一节