css计数器（counter）是什么
时间：2022-10-14作者：未知来源：争怎路由网人气：
- inherit
每个计数器名称（标识符）后面都可以跟一个可选<整数>值，该值指定对于我们所编号的元素每次出现时，计数器需要递增多少。默认增量为1。允许零和负整数。如果指定了负整数，则计数器被递减。
counter-increment属性必须和counter-reset属性配合使用，下面我们来看看示例：
article { /* 定义和初始化计数器 */ counter-reset: section; /* 'section' 是计数器的名称 */ } article h2 { /* 每出现一次h2,计数器就增加1 */ counter-increment: section; /* 相当于计数器增量：第1节； */ }3、counter()函数
counter()函数必须和content属性一起使用，用来显示CSS计数器。它以CSS计数器名称作为参数，并作为值传递给content属性，而content属性就会使用:before伪元素将计数器显示为生成的内容。
例：
h2:before { content: counter(section); }counter()函数有两种形式：counter(name)和counter(name, style)。
name参数就是要显示的计数器的名称；使用counter-reset属性就可以指定计数器的名称。
style参数是用来定义计数器的风格。默认情况下，计数器使用十进制数字格式化 ， 也就是说，计数器会以数字的形式生成 内容；但其实，css list-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字符显示计数器的示例：
ul li: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字符显示，并使用点作为分隔符：
ul li:before { content: counters(my-counter, ".", lower-roman); }css计数器（counter）的示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Tester</title> <style type="text/css"> body{ counter-reset: section; } h1{ counter-reset: subsection; } h1:before{ counter-increment: section; content: counter(section) "."; } h3:before{ counter-increment: subsection; content: counter(section) "." counter(subsection) " "; } </style> </head> <body> <h1>css计数器教程</h1> <h3>css计数器</h3> <h3>css计数器的相关属性</h3> <h3>示例说明</h3> <h1>css计数器教程</h1> <h3>css计数器</h3> <h3>css计数器的相关属性</h3> <h3>示例说明</h3> </body> </html>效果图：
总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。
以上就是css计数器（counter）是什么的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：css计数器（counter）是啥