CSS计数器介绍和使用详情

2021年3月15日09:19:09 发表评论 772 次浏览

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计数器:计数器内的计数器称为嵌套计数器。嵌套计数器用于创建标题和子标题。此示例说明了带嵌套标签的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 >

输出如下:

嵌套计算器属性

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: