跳到主要内容位置

利用 CSS Counter 计数器添加章节序号

我们在写 markdown 或者博客这种以内容为主的网页的时候,经常会有给标题加上序号的需求,就跟写书一样,在一级标题前加上第 1 章、第 2 章等,二级标题加上 1.1,1.2 之类的序号,三级标题则为 1.1.1、1.1.2 这样,如果手动这样加的话很容易出错,并且不好维护,有什么更好的解决方案吗?CSS 支持对序号的状态管理,结合使用 counter-reset 和 counter-increment 属性,就能实线序号的自增。

counter-reset 和 counter-increment 属性

counter-reset 是说给一个元素创建一个计数器,先把值设置成 0,然后它下面的子元素可以使用 counter-increment 来增加这个计数器,我们可以利用 ::before 伪元素,在某个元素的前边加上序号。访问计数器的值可以使用 counter() 函数,来看一个例子:

<style>
* {
box-sizing: border-box;
font-family: sans-serif;
}
h1 {
font-size: 28px;
}
:root {
counter-reset: chapter;
}
section {
counter-increment: chapter;
}

h1::before {
content: "第" counter(chapter) "章 ";
}
</style>

<body>
<section>
<h1>基础语法</h1>
</section>
<section>
<h1>数据类型</h1>
</section>
<section>
<h1>运算符</h1>
</section>
</body>

比如说咱们的这个页面上有 3 个 section,也就是有三章内容,然后里边用 h1 代表章节的标题,那么我们可以给根元素 :root,就是定义 CSS 变量时见到过的 :root,给他设置一个计数器,用 counter-reset 属性,值为计数器的名字,叫 chapter,它的默认值就是 0。然后每个 section 使用 counter-increment 对这个计数器加 1,只需要把计数器的名字传递给它,它就会自动把这个计数器进行加 1。

Counter()函数

我们得在 h1 标题的前面加上章节号,我们这里使用 ::before 伪元素,在它的 content 属性里加上第几章,这个 “几”就可以通过 counter() 函数来获取,它接收一个计数器的名字作为参数,我们把 chapter 传进去,这样就可以看到 h1 的前边有了章节号。 对于下边的层级,比如说二级标题和三级标题也可以这样设置,假如说这篇文章里边还有二级和三级标题,h2 代表的是二级标题,h3 代表的是三级标题,我们来看看怎么设置它们的计数器。

<style>
h1 {
/* step2, headings2 */
counter-reset: headings2;
}

h2::before {
counter-increment: headings2;
content: counter(chapter) "." counter(headings2) " ";
}

h2 {
counter-reset: headings3;
}

h3::before {
counter-increment: headings3;
content: counter(chapter) "." counter(headings2) "." counter(headings3) " ";
}
</style>

<body>
<section>
<h1>基础语法</h1>
<p>基础语法这一章主要介绍了 JavaScript 的基础语法。</p>
<h2>变量</h2>
<p>变量是所有编程语言中最基本的语法。</p>
<h3>定义变量</h3>
定义变量可以使用以下语法:
<pre>
<code>
let x = 10;
</code>
</pre>
<h2>常量</h2>
<p>常量不能重新被赋值</p>
</section>
<section>
<h1>数据类型</h1>
<p>数据类型这一章主要介绍了 JavaScript 的数据类型。</p>
<h2>基本数据类型</h2>
<p>基本数据类型有 number, string, symbol...等</p>
</section>
<section>
<h1>运算符</h1>
<p>运算符这一章主要介绍了 JavaScript 的运算符。</p>
<h2>数学运算符</h2>
<p>数学运算符有 +、-、*、/、% 等。</p>
<p>+ 的作用有</p>
</section>
</body>

第一章的二级标题应该为 1.1、1.2 这样的形式,三级标题则是 1.1.1、1.1.2 这样的形式,它们前面的序号取得都是上级标题计数器的值,后面变化的值则需要分别给 h2 和 h3 设置一个计数器,二级标题前边的序号使用的是跟 h1 一样的序号,也就是 root 下边的 chapter,对于后边的序号,我们可以在 h1 里定义一个 headings2 计数器,然后在 h2 的 ::before 伪元素中对它进行加 1,并组成章节序号字符串,这样就有 1.1、1.2 这样的效果了,它的后面还加了一个空格,与后面的标题间隔开。 同里,在 h2 元素中设置三级标题的计数器,headings3,再在 h3 的 ::before 伪元素中,对序号进行加 1 并组装章节字符串,使用 :root 中的 chapter、h1 中的 headings2 和 h3 中的 headings3 计数器。这样三级标题也就有了章节号。

列表层级

css 的计数器还可以设置列表层级,支持嵌套,也就是下级的计数器可以跟上级的使用同一个,但是它维护自己的序号。比如说我们有一个有序列表,放到了第三章,它里边的还有一个嵌套的列表,我们在第 1 层显示 1、2、3,然后在第 2 层显示 1.1、1.2 和 1.3:

<style>
/* step3 nested */
ol {
counter-reset: list;
list-style-type: none;
}
li::before {
counter-increment: list;
content: counters(list, ".") " ";
}
</style>

<body>
<!-- ... -->
<section>
<h1>运算符</h1>
<p>运算符这一章主要介绍了 JavaScript 的运算符。</p>
<h2>数学运算符</h2>
<p>数学运算符有 +、-、*、/、% 等。</p>
<p>+ 的作用有</p>
<ol>
<li>
对数字进行相加
<ol>
<li>1 + 1</li>
<li>50 + 100 + 1000</li>
<li>-40 + 30</li>
</ol>
</li>
<li>对字符进行拼接</li>
<li>把字符串转换为数字</li>
</ol>
</section>
</body>

我们首先给 ol 元素设置设置一个新的计数器,叫 list,然后设置它的 list-style-type 属性为 none,把默认的序号去掉 ,要不它会同时显示这两种序号。在每个 li 元素中,使用 counter-increment 对这个计数器进行加 1。因为嵌套的元素使用相同的计数器名字,那么这里需要使用 counters 函数来访问上级所有的计数器,它接收一个计数器的名字作为参数,用于访问计数器,还接收第 2 个参数,用于指定拼接计数器的符号,跟 JavaScript Array 中的 join() 方法类似,最后返回所有层级计数器拼接后的字符串,我们这里把 list 计数器传递给它,设置拼接的字符为点号。这样,列表层级的序号就展示出来了。

好了,这个就是使用 css 给元素加上计数器的教程,对于内容为主的网站来说非常的方便。这里主要使用了 counter-reset 和 counter-increment 这两个属性来维护计数器,以及使用 counter() 和 counters() 这两个函数来分别获取单一序号和嵌套的全部序号。你学会了吗?如果有帮助三连,想学更多有用的前端开发知识,请关注峰华前端工程师,感谢观看!

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,连载中现只需 48 元(领取优惠券)点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买