计数器

创建一个自定义列表计数器，可以处理嵌套的列表元素。

• 使用 counter-reset 初始化一个变量计数器（默认为 0），其名称为属性的值（即 counter）。
• 对于每个可计数的元素（即每个 <li>），使用 counter-increment 对变量计数器进行递增。
• 使用 counters() 将每个变量计数器的值作为 ::before 伪元素的 content 的一部分来显示，对于每个可计数的元素（即每个 <li>）。传递给它的第二个值（'.'）作为嵌套计数器的分隔符。

<ul>
  <li>列表项</li>
  <li>列表项</li>
  <li>
    列表项
    <ul>
      <li>列表项</li>
      <li>列表项</li>
      <li>列表项</li>
    </ul>
  </li>
</ul>

ul {
  counter-reset: counter;
  list-style: none;
}

li::before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}