📌  相关文章
📜  CSS counter

📅  最后修改于: 2020-11-06 00:55:26             🧑  作者: Mango

CSS计数器

CSS计数器类似于变量。这些由CSS维护，并且这些值可以由CSS规则递增以跟踪使用它们的次数。

CSS计数器有助于基于CSS的简单递增和显示生成内容的数字。

CSS计数器属性

以下是与CSS计数器一起使用的属性的列表：

  • counter-reset：用于创建或重置计数器。
  • counter-increment：用于增加计数器值。
  • content：用于插入生成的内容。
  • counter()或counters()函数：用于将计数器的值添加到元素。

注意：在使用CSS计数器之前，必须使用counter-reset创建它。

CSS计数器示例

让我们以一个示例为例，为页面创建一个计数器并为每个下一个元素增加计数器值。

请参阅以下示例：


    





Example of CSS Counters:


Java Tutorial


HTML Tutorial


CSS Tutorial


Oracle Tutorial


Note: IE8 supports these properties only if a !DOCTYPE is specified.

注意：在上面的示例中，您可以看到在主体选择器中为页面创建了一个计数器，并且为每个计数器增加了计数器值

元素并添加“部分：“到每个开头

元件。

CSS嵌套计数器

您也可以在计数器内创建计数器。这称为柜台嵌套。让我们以一个示例来演示嵌套计数器。

请参阅以下示例：








Java tutorials:


Core Java tutorial


Servlet tutorial


JSP tutorial


Spring tutorial


Hibernate tutorial



Web technology tutorials:


HTML tutorial


CSS tutorial


jQuery tutorial


Bootstrap tutorial



Database tutorials:


SQL tutorial


MySQL tutorial


PL/SQL tutorial


Oracle tutorial


Note: IE8 supports these properties only if a !DOCTYPE is specified.

注意：在以上示例中，您可以看到为该节创建了一个计数器，并在该节中创建了另一个名为subsection的嵌套计数器。

不同级别的嵌套计数器

您可以使用嵌套计数器创建轮廓列表。它使您可以在不同级别的嵌套计数器之间插入字符串。

请参阅以下示例：








Different level of Nesting counters


    
  
  1. item
    2. 
  
  2. item
    
      
      
    1. item
      2. 
      
    2. item
      3. 
      
    3. item
        
        
          
      1. item
        2. 
          
      2. item
        3. 
          
      3. item
        4. 
        
      
      
      4. 
      
    4. item
      5. 
    
    
  
    3. 
  
  3. item
    4. 
  
  4. item
    5. 



Note: IE8 supports these properties only if a !DOCTYPE is specified.