《HTML 5与CSS 3权威指南（第3版·下册）》——第20章 20.3 使用content属性来插入项目编号

20.3 使用content属性来插入项目编号

前面两节中分别介绍了利用before选择器与after选择器的content属性在元素的前面或后面插入文字与图像的方法，本节介绍当页面中具有多个项目时如何利用这个content属性来在项目前插入项目编号，在本节的最后介绍一下如何利用这个content属性在字符串两边加上括号。

到目前为止，Firefox、Chrome、Safari、Opera浏览器均支持插入项目编号的功能，在Internet Explorer中从IE8开始支持这个功能。

20.3.1 在多个标题前加上连续编号

在content属性中使用counter属性值来针对多个项目追加连续编号，使用方法如下所示。
<元素>：before{

content：counter(计数器名);

}
使用计数器来计算编号，计数器可任意命名。
另外，还需要在元素的样式中追加对元素的counter-increment属性的指定，为了使用连续编号，需要将counter-increment属性的属性值设定为before选择器或after选择器的counter属性值中所指定的计数器名。代码如下所示。
<元素>{

counter-increment:before选择器或after选择器中指定的计数器名

}
接下来，我们在代码清单20-6中看一个对多个项目追加连续编号的示例，在该示例中具有多个标题，使用before选择器对这些标题追加连续编号。

这部分代码的运行结果如图20-7所示。

20.3.2 在项目编号中追加文字

可以在插入的项目编号中加入文字，使项目编号变成类似“第1章”之类的带文字的编号。

针对代码清单20-6，只要将before选择器中的代码修改为如下所示的代码就可以了。

h1:before{
content: '第'counter(mycounter)'章';
}
将代码清单20-6中before选择器中的代码用上面这段代码进行替代，然后重新运行该示例，运行结果如图20-8所示。