css中的计数器是什么

这篇文章给大家分享的是有关css中的计数器是什么的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

晋州ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

css计数器是什么？

计数器是css3提供的一个强大的工具，是一种可以让我们使用CSS给元素自动编号的方法。使用它可以很方便对页面中的任意元素进行计数，实现类似于有序列表的功能。但与有序列表相比，css计数器可以对任意元素计数，同时还可以实现个性化计数。

css计数器的相关属性

1、counter-reset

counter-reset属性用于定义和初始化一个或多个CSS计数器。它可以使用一个或多个标识符作为值，该值指定计数器的名称。

使用语法：

counter-reset:[<标识符><整数>?]+|none|inherit

每个计数器名称后面都可以跟一个可选的<整数>值，该值指定计数器的初始值。

注意：

1）、关键字none，inherit和initial不能作为计数器名称；关键字none，inherit可以作为计counter-reset属性的值。

设置none将取消设置计数器；设置inherit将从元素的父元素处继承counter-reset值。该counter-reset属性的默认值为none。

2）、计数器的初始值不是计数器显示时的第一个数字/值。

这意味着如果希望计数器从1开始显示，则需要将counter-reset中的初始值设置为零。0是默认的初始值，所以如果省略它，默认情况下它将重置为零；counter-reset允许使用负值。因此，如果希望计数器从零开始显示，可以将其初始值设置为-1。

示例：

someSelector{

counter-reset:counterA;/*计数器counterA初始，初始值为0*/

counter-reset:counterA6;/*计数器counterA初始，初始值为6*/

counter-reset:counterA4counterB;/*计数器counterA初始，初始值为4，计数器counterB初始，初始值为0*/

counter-reset:counterA4counterB2;/*计数器counterA初始，初始值为4，计数器counterB初始，初始值为2*/

}

2、counter-increment

counter-increment属性用于指定一个或多个CSS计数器的增量值。它将一个或多个标识符作为值，指定要递增的计数器的名称。

使用语法：

counter-increment:[<标识符><整数>?]+|none|inherit

每个计数器名称（标识符）后面都可以跟一个可选<整数>值，该值指定对于我们所编号的元素每次出现时，计数器需要递增多少。默认增量为1。允许零和负整数。如果指定了负整数，则计数器被递减。

counter-increment属性必须和counter-reset属性配合使用，下面我们来看看示例：

article{/*定义和初始化计数器*/

counter-reset:section;/*'section'是计数器的名称*/

}

articleh3{/*每出现一次h3,计数器就增加1*/

counter-increment:section;/*相当于计数器增量：第1节；*/

}

3、counter()函数

counter()函数必须和content属性一起使用，用来显示CSS计数器。它以CSS计数器名称作为参数，并作为值传递给content属性，而content属性就会使用:before伪元素将计数器显示为生成的内容。

例：

h3:before{

content:counter(section);

}

counter()函数有两种形式：counter(name)和counter(name,style)。

name参数就是要显示的计数器的名称；使用counter-reset属性就可以指定计数器的名称。

style参数是用来定义计数器的风格。默认情况下，计数器使用十进制数字格式化，也就是说，计数器会以数字的形式生成内容；但其实，csslist-style-type属性的所有可用样式也可用于计数器。这意味着您可以创建十进制数字计数器，显示为罗马字符的计数器，低字母字符等。以下是所有可能的计数器样式：

disc：实心圆样式

circle：空心圆样式

square：实心方块样式

decimal：阿拉伯数字样式

lower-roman：小写罗马数字样式

upper-roman：大写罗马数字样式

lower-alpha：小写英文字母样式

upper-alpha：大写英文字母样式

none：不使用项目符号

armenianl：传统的亚美尼亚数字样式

cjk-ideographic：浅白的表意数字样式

georgian：传统的乔治数字样式

lower-greek：基本的希腊小写字母样式

hebrew：传统的希伯莱数字样式

hiragana：日文平假名字符样式

hiragana-iroha：日文平假名序号样式

katakana：日文片假名字符样式

katakana-iroha：日文片假名序号样式

lower-latin：小写拉丁字母样式

upper-latin：大写拉丁字母样式

以下是指定使用lower-roman字符显示计数器的示例：

ulli:before{

content:counter(my-counter,lower-roman);

}

4、counters()函数

counters()函数也必须和content属性一起使用，用来显示CSS计数器。和counter(）函数一样，counters()函数也作为值传递给content属性；然后，content属性在使用:before伪元素将计数器显示为生成的内容。

counters()函数也有两种形式：counters(name,string)和counters(name,string,style)。

name参数也是要显示的计数器的名称。可以使用counter-reset属性来指定计数器的名称。

而counters()函数与counter(）函数（单数形式）区别在于：counters()函数可以用于设置嵌套计数器。

嵌套计数器是用于为嵌套元素（如嵌套列表）提供自动编号。如果您要将计数器应用于嵌套列表，则可以对第一级项目进行编号，例如，1，2，3等。第二级列表项目将编号为1.1，1.2，1.3等。第三级项目将是1.1.1，1.1.2，1.1.3，1.2.1，1.2.2，1.2.3等。

string参数用作不同嵌套级别的数字之间的分隔符。例如，在'1.1.2'中，点（'.'）用于分隔不同的级别编号。如果我们使用该counters()函数将点指定为分隔符，则它可能如下所示：

content:counters(counterName,".");

如果希望嵌套计数器由另一个字符分隔，例如，如果希望它们显示为“1-1-2”，则可以使用短划线而不是点作为字符串值：

content:counters(counterName,"-");

和counter(）函数一样，style参数是用来定义计数器的风格。默认情况下，计数器使用十进制数字格式化。具体关于style参数的设置可以参照counter(）函数的style参数。

以下是一个示例，指定嵌套计数器将使用lower-roman字符显示，并使用点作为分隔符：

ulli:before{

content:counters(my-counter,".",lower-roman);

}

css计数器（counter）的示例：

body{

counter-reset:section;

}

h2{

counter-reset:subsection;

}

h2:before{

counter-increment:section;

content:counter(section)".";

}

h4:before{

counter-increment:subsection;

content:counter(section)"."counter(subsection)"";

}

css计数器教程

css计数器

css计数器的相关属性

示例说明

css计数器教程

css计数器

css计数器的相关属性

示例说明

感谢各位的阅读！关于“css中的计数器是什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！