CSS 实现文章目录自动编号

用到的 CSS 特性

counter-reset：创建一个计数器
counter-increment：将计数器加 1
counter：CSS 函数，用来获取计数器的值

这几个 CSS 的用法可以看看 MDN 文档

示例

HTML 结构

<nav class="toc">
  <ol class="toc-level toc-level-1">
    <li class="toc-item toc-item-h2">
      <a class="toc-link toc-link-h2" href="#前置准备">前置准备</a>
    </li>
    <li class="toc-item toc-item-h2">
      <a class="toc-link toc-link-h2" href="#目标">目标</a>
    </li>
    <li class="toc-item toc-item-h2">
      <a class="toc-link toc-link-h2" href="#具体步骤">具体步骤</a>
      <ol class="toc-level toc-level-2">
        <li class="toc-item toc-item-h3">
          <a class="toc-link toc-link-h3" href="#准备一个-debian-系统">准备一个 Debian 系统</a>
          <ol class="toc-level toc-level-3">
            <li class="toc-item toc-item-h4">
              <a class="toc-link toc-link-h4" href="#配置阿里云镜像源">配置阿里云镜像源</a>
            </li>
            <li class="toc-item toc-item-h4">
              <a class="toc-link toc-link-h4" href="#安装常用包">安装常用包</a>
            </li>
          </ol>
        </li>
        <li class="toc-item toc-item-h3">
          <a class="toc-link toc-link-h3" href="#配置-shell-环境">配置 Shell 环境</a>
        </li>
        <li class="toc-item toc-item-h3">
          <a class="toc-link toc-link-h3" href="#配置-node-环境">配置 Node 环境</a>
        </li>
        <li class="toc-item toc-item-h3">
          <a class="toc-link toc-link-h3" href="#安装必备的-npm-包">安装必备的 npm 包</a>
        </li>
      </ol>
    </li>
  </ol>
</nav>

核心 CSS 代码

/* 把列表项的默认样式清除 */
.toc-level {
  list-style-type: none;
}

/* 遇到 nav.toc 时就设置一个计数器 toc-section */
nav.toc {
  counter-reset: toc-section;
}

/* 遇到 .toc-link-h2 时就设置一个计数器 toc-subsection */
.toc-link-h2 {
  counter-reset: toc-subsection;
}

/* 1. 使用伪元素 :berfore 把序号添加到内容中
 * 2. 使用 counter-increment 把计数器加 1
 * 3. 使用 counter(xxx) 获取计数器 xxx 的值
 */
.toc-link-h2::before {
  counter-increment: toc-section;
  /* prettier-ignore */
  content: counter(toc-section)'.';
  margin-right: 0.4em;
}

/* 后面这几个都是同理 */
.toc-link-h3 {
  counter-reset: toc-subsection2;
}

.toc-link-h3::before {
  counter-increment: toc-subsection;
  /* prettier-ignore */
  content: counter(toc-section)'.'counter(toc-subsection);
  margin-right: 0.4em;
}

.toc-link-h4::before {
  counter-increment: toc-subsection2;
  /* prettier-ignore */
  content: counter(toc-section)'.'counter(toc-subsection)'.'counter(toc-subsection2);
  margin-right: 0.4em;
}

CSS 实现文章目录自动编号

用到的 CSS 特性

示例

参考链接