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

r囧r小猫 2022-05-26 01:52 507阅读 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的关键词，比如`none`、`inherit`之类。

`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”，则可增加计数。

效果图如下：

![70][]

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>

[Divya Manian]: https://dev.opera.com/authors/divya-manian/
[CSS Generated Content Techniques]: https://dev.opera.com/articles/css-generated-content-techniques/
[70]: /images/20220526/bcb278b735254b5eac17ed2fc8069908.png