用到的 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;
}