CSS中的计数器基本上是可用于编号的变量, CSS计数器的值可以增加。例如, CSS计数器可用于自动增加标题编号。在HTML中, <ol>标记用于为列表项提供有序号, 但是CSS包含用于以其他某种方式给定序元素的计数器。
CSS计数器属性：CSS计数器包含以下属性：
- 重置：用于重置计数器。
- 反增量：它基本上增加一个计数器值。
- 内容：它用于生成内容。
- counter()或counters()函数：可以使用content属性中的counter()或counters()函数显示计数器的值。这两个函数基本上用于将计数器的值添加到元素。
初始化CSS计数器：
要首先使用CSS计数器属性, 必须使用counter-reset属性创建它, 第一步是重置计数器。默认情况下, 使用counter-reset属性将myCounter初始化为值0(零)。
语法如下：
counter-reset: myCounter;CSS计数器的增量和使用：
要增加计数器, 请使用CSS counter-increment属性。
语法如下：
counter-increment: myCounter;内容中的counter()或counters()函数用于按特定顺序显示内容。
语法如下：
content: counter(myCounter);例子：
<!DOCTYPE html>
< html >
< head >
< title >CSS counter property</ title >
< style >
body {
counter-reset: myCounter;
}
h4::before {
counter-increment: myCounter;
content: "Heading " counter(myCounter) ": ";
}
.geeks {
color:#090;
font-size:40px;
font-weight:bold;
text-align:center;
}
.gfg {
text-align:center;
font-size:18px;
}
</ style >
</ head >
< body >
< div class = "geeks" >lsbin</ div >
< div class = "gfg" >CSS counter property</ div >
< h3 >Example of automatic numbering with CSS counters</ h3 >
< h4 >GeekforGeeks</ h4 >
< h4 >Computer Science portal</ h4 >
< h4 >Geeks</ h4 >
</ body >
</ html >输出如下：
嵌套的CSS计数器：计数器内的计数器称为嵌套计数器。嵌套计数器用于创建标题和子标题。此示例说明了带嵌套标签的CSS计数器的使用。不同的计数器用于不同类型的标签。
例子：
<!DOCTYPE html>
< html >
< head >
< title >Nested css counter</ title >
< style >
body {
counter-reset: counter1;
}
h3 {
counter-reset: counter2;
}
h3::before {
counter-increment: counter1;
content: counter(counter1) ". ";
}
h4::before {
margin-left:40px;
counter-increment: counter2;
content: counter(counter1) "." counter(counter2) " ";
}
.geeks {
color:#090;
font-size:40px;
font-weight:bold;
text-align:center;
}
.gfg {
text-align:center;
font-size:18px;
}
</ style >
</ head >
< body >
< div class = "geeks" >lsbin</ div >
< div class = "gfg" >Nested counter property</ div >
< h3 >CSS counter example</ h3 >
< h4 >lsbin</ h4 >
< h4 >lsbin</ h4 >
< h4 >lsbin</ h4 >
< h4 >lsbin</ h4 >
< h3 >CSS counter example</ h3 >
< h4 >lsbin</ h4 >
< h4 >lsbin</ h4 >
< h4 >lsbin</ h4 >
< h4 >lsbin</ h4 >
< h3 >CSS counter example</ h3 >
< h4 >lsbin</ h4 >
< h4 >lsbin</ h4 >
< h4 >lsbin</ h4 >
< h4 >lsbin</ h4 >
</ body >
</ html >输出如下：
