CSS counter计数器(content目录序号自动递增)详解

2021年9月18日 6点热度 0条评论 来源: 热爱前端的小君同学

CSS Counters用到的属性

前面也提到过,使用CSS Counters给元素创建自动递增计算器不仅仅是依赖于某一个CSS属性来完成,他需要几个属性一起使用才会有效果。使用的到属性包括:

  •  **counter-reset**:此值是必需的。必须用于选择器,主要用来标识该作用域,其值可以自定义。
  •  **counter-increment**:用来标识计数器与实际相关联的范围。
  •  **content**:用来生成内容,其为:before:after::before::after的一个属性。在生成计数器内容,主要配合counter()一起使用。
  •  **counter()**:该函数用来设置插入计数器的值。
  •  **:before**、**:after**或**::before**、**::after**:配合content用来生成计数器内容。

要想完全了解或者熟练使用好CSS Counters来创建计数器,就需要对用到的每个属性的使用规则有一定的了解。接下来就先简单的了解这几个属性。

counter-reset

语法规则

counter-reset:[ <identifier> <integer>? ]+ | none | inherit 

取值说明

counter-reset的默认值为none,其主要取值包括两个部分:

  •  **identifier**:用来定义计数器的名称,这个名称可以自定义,如:item。而且后面可以紧跟一个整数值,中间用空格分隔开来,如headings 0
  •  **integer**:此值用来设置调用计算数器时起始值,默认值为0

功能描述

counter-reset主要功能用来标识计数器作用域,而且此值必须用在选择器上,必且是不能缺少的。共包括两个部分,第一个部分是自定义计数器名称,这一部分是必需的。第二部分是计数器起始值,此值是可选的。默认值为0。此值告诉标识组起始值是什么,所以说这个值非常有价值。因为,如果你设置的值为0,那么计数从1开始;如果你设置的值是-5,那么计数从-4开始。依此类推。

counter-reset自定义计数器名称时可以随意取名,但此名不能是CSS的关键词,比如noneinherit之类。

counter-reset属性可以包含一个或者多个计数器标识符,每个后面都可以跟一个整数值,如section 0 heading 0。如果元素都重置,并且增加一个计数器,计数器是第一次重置,后面值就会递增。如果不止一次指定同一个计算器,则将按指定的计数器做递增。
 

counter-increment

语法规则

counter-increment:[ <identifier> <integer>? ]+ | none | inherit 

取值说明

默认值为none。其值也包括两个部分:

  •  **identifier**:计数器名称,就调用counter-reset声明的计数器的标识符。
  •  **integer**:一个整数值,指定计数起始值。其值允许是0或者负整数值,如果未指定任何值,则该值为1(前提是counter-reset未显式设置计数的起始值)。其值递增是按倍数值递增,如果设置了值为2,后面元素递增值为4、6、8,依此类推。

功能描述

counter-increment属性是用来标识计数器与实际相关联元素范围。其第一个值是必需的,获取counter-reset定义的标识符。

counter-ncrement第二个值是一个可选值,是一个整数值,可以是正整数,也可以是负整数。主要用来预设递增的值,如果取值为负值时,表示递减。默认值为1

content

content是和伪类:before:after或者伪元素::before::after配合在一起使用,主要功能用来生成内容。有关于content详细介绍,此处不做过多阐述,感兴趣的同学可以阅读Divya Manian写的《CSS Generated Content Techniques》一文。

在本文中所涉及到的内容,content属性主要与counter([])配合使用,用来生成计数器值,如:

h2{ counter-increment: section; &:before{ content:"Chapter" counter(Chapter) "." counter(section); } } 

counter()

counter()是一个函数,其主要配合content一起使用。使用counter()来调用定义好的计数器标识符。

counter()函数接受两个参数,而且两参数之间使用逗号(,)来分隔。第一个参数是counter-increment定义的属性值,用来告诉该文档插入的计数器标识符名称是什么。第二个是用来设置计数器的风格,有点类似于list-style-type。默认情况之下取值为十制,但你也可以重置这个样式风格,比如upper-roman或者upper-alpha等。

counter()函数第二个值与列表中的list-style-type值相等:

  •  disc
  •  circle
  •  square
  •  decimal
  •  decimal-leading-zero
  •  lower-roman
  •  upper-roman
  •  lower-greek
  •  lower-latin
  •  upper-latin
  •  armenian
  •  georgian
  •  lower-alpha
  •  upper-alpha
  •  none
  •  inherit

同样的,可以使用多个counter(),如:content: counter(Chapter,upper-roman) "-" counter(section,upper-roman);

1、counter-reset 属性

用法:counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。

说明:利用这个属性,计数器可以设置或重置为任何值,可以是正值或负值。如果没有提供 number,则默认为 0。

注释:如果使用 “display: none”,则无法重置计数器。如果使用 “visibility: hidden”,则可以重置计数器。

2、counter-increment 属性

用法:counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

说明:利用这个属性,计数器可以递增(或递减)某个值,这可以是正值或负值。如果没有提供 number 值,则默认为 1。

注释:如果使用了 “display: none”,则无法增加计数。如使用 “visibility: hidden”,则可增加计数。

效果图如下:

css部分  

              *{padding: 0;margin: 0;}
a{text-decoration: none;color: #fff;}
li{list-style: none;}
body{font-size: 14px;font-family: "微软雅黑";}
.box{width: 300px;margin: 100px auto;background-color: #111111;}
.box ul li{padding-left: 10px;border-bottom: 1px solid #fff;counter-increment: test;}
.box ul li:before{content: counter(test)".";padding-right: 12px;color: red;}
.box ul li li{counter-increment: test2;}
.box ul li li:before{content: counter(test)"-"counter(test2)".";padding-right: 12px;color: red;}

body代码

<div class="box">
<ul>
<li>
<a href="#">我飞地狱火奴的含义</a>
<ul>
<li><a href="#">alisa</a></li>
<li><a href="#">alisa</a></li>
<li><a href="#">alisa</a></li>
</ul>
</li>
<li>
<a href="#">我飞地狱火奴的含义</a>
<ul>
<li><a href="#">alisa</a></li>
<li><a href="#">alisa</a></li>
<li><a href="#">alisa</a></li>
</ul>
</li>
<li><a href="#">我飞地狱火奴的含义</a></li>
<li><a href="#">我飞地狱火奴的含义</a></li>
<li><a href="#">我飞地狱火奴的含义</a></li>
<li><a href="#">我飞地狱火奴的含义</a></li>
<li><a href="#">我飞地狱火奴的含义</a></li>
<li><a href="#">我飞地狱火奴的含义</a></li>
<li><a href="#">我飞地狱火奴的含义</a></li>
</ul>
</div>

    原文作者:热爱前端的小君同学
    原文地址: https://blog.csdn.net/qq_37815596/article/details/80046996
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。