如何用CSS为HTML嵌套有序列表子项添加父编号并隐藏父编号

我之前做文档排版时刚好遇到过一模一样的需求，用CSS的**计数器（counter）**就能完美解决，完全不需要改你的HTML结构！

先直接上完整代码，你可以直接复制测试：

HTML（你的原结构不变） #

<ol>
  <li>
    <h1>main title</h1>
    <ol class="father">
      <li>mac</li>
      <li>windows</li>
      <li>linux</li>
    </ol>
  </li>
</ol>

CSS（核心实现） #

/* 父级列表：初始化计数器+隐藏默认编号 */
ol {
  counter-reset: main-counter 1; /* 初始化计数器，值为1（对应你要的1.x开头） */
  list-style: none; /* 隐藏父列表的默认编号 */
}

/* 子列表：初始化子计数器+隐藏默认编号 */
ol.father {
  counter-reset: sub-counter; /* 初始化子项计数器 */
  list-style: none; /* 隐藏子列表的默认编号 */
  margin-top: 0.5em; /* 可选：和标题拉开点距离 */
}

/* 子列表项：递增计数器 */
ol.father > li {
  counter-increment: sub-counter; /* 每一个li递增子计数器 */
  margin-left: 0; /* 可选：清除默认缩进 */
}

/* 生成自定义编号 */
ol.father > li::before {
  content: counter(main-counter) "." counter(sub-counter) ". "; /* 拼接父+子计数器 */
  font-weight: normal; /* 可选：和正文一致的权重 */
  margin-right: 0.3em; /* 可选：编号和内容之间的间距 */
}

效果说明 #

这样设置后，父列表的默认编号会被隐藏，子列表的每一项都会生成1.1.、1.2.、1.3.这样的编号，完全匹配你要的效果：

main title
1.1. mac
1.2. windows
1.3. linux

原理拆解 #

1. counter-reset：用来初始化一个计数器，父列表的main-counter设为1，是因为我们要从1开始生成子项的编号前缀；子列表的sub-counter默认从0开始，每次递增后变成1、2、3...
2. counter-increment：每遇到一个子列表项，就把sub-counter加1
3. ::before伪元素：通过content属性把父计数器和子计数器拼接成你要的格式，再添加到每个子项前面

如果后续父列表有多个项（比如第二个main title要生成2.x的编号），只需要把父列表的counter-reset改成counter-reset: main-counter;（默认从1开始），然后给父列表的每个li加上counter-increment: main-counter;就行，扩展性很强~

内容的提问来源于stack exchange，提问作者Alfredo Solís