카운터를 사용하여 CSS의 요소에 자동으로 번호를 매기는 방법은 무엇입니까? CSS 카운터 사용(코드 예)

counter-reset:   标识符（计数器的名称）   <整数>（起始值,可选，默认值为0）;

article {     
/ *设置一个名为“section”的计数器，并将其初始化为0 * / 
    counter-reset：section 0 ;
}

h2 {     
/ *在每次出现h2时使用“section”计数器，并每次出现就增加1（默认值）* / 
    counter-increment：section 1 ;
}

h2 :: before {     
   content：counter（section）;
}

h2::before {    
 /* 在数字之后加一个点，后面加上空格 */
    content: counter(my-counter) ". "; 
}

<h2>css计数器的使用</h2>
<p>css计数器的使用css计数器的使用css计数器的使用css计数器的使用css计数器的使用</p>
         
<h2>css计数器的使用</h2>
<p>css计数器的使用css计数器的使用css计数器的使用css计数器的使用css计数器的使用</p>

 body{
     counter-reset: section;
}
             
 h2:before{
     counter-increment: section;
     content: counter(section) ".";
}

<div class="container">
  <ul>
    <li> 菜单1
      <ul>
        <li>菜单1.1</li>
        <li>菜单1.2</li>
        <li>菜单1.3
          <ul>
            <li>菜单1.3.1</li>
            <li>菜单1.3.2</li>
            <li>菜单1.3.3</li>
            <li>菜单1.3.4</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>菜单2
      <ul>
        <li>菜单2.1</li>
        <li>菜单2.2</li>
        <li>菜单2.3</li>
      </ul>
    </li>
  </ul>
</div>

ul {     
   list-style: none;/* 去除ul中默认的样式*/
   counter-reset：nested-counter;
}
ul  li {     
   counter-increment：nested-counter;
   line-height: 1.6;
}

ul  li ：before {     
/ * counters（）函数内的字符串是两个计数器之间的分隔符，并且函数外部的字符串是生成的数字和列表项的文本之间的分隔符* / 
     content: counters(nested-counter, ".") ") ";
     font-weight: bold;
}

counter(name，style)
counters(name，分隔符，style)

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit