使用 CSS 计数器实现多级编号

CSS

ul {
  list-style: none;
  counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
  counter-increment: list-item-number;
}
li:before {
  content: counters(list-item-number, ".") " "; /* usage of counters() function means value of counters at all higher levels are combined before printing */
}

HTML

<ul>
  <li>Level 1
    <ul>
      <li>Level 1.1
        <ul>
          <li>Level 1.1.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 2
    <ul>
      <li>Level 2.1
        <ul>
          <li>Level 2.1.1</li>
          <li>Level 2.1.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 3</li>
</ul>

以上是使用 CSS 计数器的多级编号的示例。它利用了计数器的自嵌套概念。自嵌套是一个概念，如果一个元素已经有一个具有给定名称的计数器但是必须创建另一个，那么它将它创建为现有计数器的子元素。在这里，第二级 ul 已经从其父级继承 list-item-number 计数器，但随后必须创建自己的 list-item-number（对于其子级 li），因此创建 list-item-number[1]（第二级计数器）并将其嵌入 list-item-number[0]（第一级计数器）。因此，它实现了多级编号。

使用 counters() 函数而不是 counter() 函数打印输出，因为 counters() 函数设计为在打印输出时为所有更高级别计数器（父级）的值添加前缀。