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

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

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

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

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

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

<元素>：before{

    content：counter(计数器名);

}

使用计数器来计算编号，计数器可任意命名。

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

<元素>{

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

}

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

代码清单17-6　对多个项目追加连续编号的示例

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