如何在 CSS 中使用部分定义数字部分和子部分？

在本文中，我们将学习如何使用 CSS 中的 section 定义多个 section 和 sub-section。 section标签定义文档的部分，例如章节、页眉、页脚或任何其他部分。 section 标签将内容分为sections和subsections。

CSS 中的计数器基本上是可用于编号的变量，CSS 计数器的值可以通过 CSS 规则递增。因此，为了解决此任务，我们将使用以下 CSS 计数器属性。

• counter-reset：用于重置计数器。

  句法：

  counter-reset: myCounter;

• counter-increment：它基本上增加了一个计数器值。

  句法：

  counter-increment: myCounter;

• 内容：用于生成内容。
• counter() 或 counters()函数：可以使用内容属性中的 counter() 或 counters()函数显示计数器的值。这两个函数基本上用于将计数器的值添加到元素中。

  句法：

  content: counter(myCounter);

通过以下步骤，我们可以使用 CSS 中的部分定义多个部分和子部分：

\
• 第 1 步：首先，我们使用 body 选择器中的 counter-reset 属性和 h2 选择器中的 subsection 为页面创建一个计数器。

  body {
    counter-reset: counter1;
  }
  h2{
    counter-reset: counter2;
  }

• 第 2 步：现在使用counter-increment属性增加每个部分的 counter1 值和每个子部分的 counter2 值，然后使用content和counter()属性在 h2 之前添加 counter1 值和在 h3 之前添加 counter2 值。

  h2:before {
     counter-increment: counter1;
     content: "Section " counter(counter1) ". ";
  }
  h3:before {
     counter-increment: counter2;
     content: counter(counter1) "." counter(counter2) " ";
  }

HTML 代码：以下是上述方法的完整实现。

HTML

    
    


    
GeeksforGeeks
    
CSS
    
GeeksforGeeks
    
GeeksforGeeks
    
GeeksforGeeks
    
CSS
    
GeeksforGeeks
    
GeeksforGeeks
    
GeeksforGeeks
    
CSS
    
GeeksforGeeks
    
GeeksforGeeks
    
GeeksforGeeks
    
GeeksforGeeks

输出：

计数器输出