使用 CSS 实现标题自动编号

近几天在学习 HTML5 与 CSS3 时,偶然看到了 CSS 中自动为标题添加编号的特性。仔细阅读过 W3Schools 上提供的文档之后,试验了一下,确实非常好用。从此不需再花费精力校对标题编号,可以将时间集中到真正需要做的事情,也避免了手动编号出错的窘态。

这篇博文整理了我搜集的相关知识点,方便希望详细了解的人查看。

涉及内容

首先介绍一下本文涉及到的相关 CSS 知识点。其中用到的 CSS 伪元素和属性皆基于 CSS2.1 标准,所以基本不需要担心浏览器的兼容性问题。如果你对此还不够放心,可以在不同浏览器中打开文末给出的样例进行测试。

before 伪元素选择器

before 伪元素选择器用于在某个元素之前插入一些内容。所插入的内容由 content 属性指定,可以是字符串、图片、音频甚至视频文件等。

与之对应的,还有 after 伪元素,用于在某个元素的后面插入一些内容。

其用法如:

1
2
3
4
5
6
7
8
/* insert a word before anchor */
a:before {
content: 'goto: '
}
/* add a icon after an url end by mp4*/
a[href$=mp4]:after {
content: url(moive.png)
}

counter-increment 属性

counter-increment 属性用于递增计数器,该属性可接受的输入有:

1
counter-increment: none|id|initial|inherit;

其中值的意义为:

  • none:不递增计数器;
  • id:需递增的计数器ID;
  • initial:递增的步长,默认为 1;
  • inherit:从父元素继承。

counter-reset 属性

counter-reset 属性用于重置计数器,比如在每篇文章开始前将计数器重置为 0。该属性可接受的输入有:

1
counter-reset: none|name-number|initial|inherit;

其中值的意义为:

  • none:不重置计数器;
  • name-number:需重置的计数器ID;
  • initial:重置的值,默认为 0;
  • inherit:从父元素继承。

示例代码

以下面的网页作为示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自动编号演示</title>
<link rel="stylesheet" href="counter.css">
</head>
<body>
<h1>文章大标题</h1>
<h2>前言</h2>
<h2>数据准备</h2>
<h3>观测数据准备</h3>
<h3>表文件准备</h3>
<h2>参数设置</h2>
<h3>高度角</h3>
<h3>模型设置</h3>
<h2>开始解算</h2>
<h2>成果查看</h2>
</body>
</html>

其中引入的 counter.css 中的代码为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* reset h2 counter to -1 when meet a h1 element */
h1 {
counter-reset: h2Counter -1;
}
/* insert number before h2 element */
h2:before {
content: counter(h2Counter)'. '
}
/* increase h2 counter and reset h3 counter when meet a h2 element */
h2 {
counter-increment: h2Counter;
counter-reset: h3Counter;
}
h3:before {
content: counter(h2Counter) '.' counter(h3Counter) ' '
}
h3 {
counter-increment: h3Counter;
}

将以上两块代码分别保存为 counter.html 和 counter.css,确保这两个文件位于同一目录内,然后使用浏览器打开其中的 counter.html 文件即可预览效果。

使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏