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-6 对多个项目追加连续编号的示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http：//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>对多个项目追加连续编号的示例</title>
</head>
<style type="text/css">
h1:before{
content: counter（mycounter）；
}
h1{
counter-increment: mycounter;
}
</style>
<body>
<h1>大标题</h1>
<p>示例文字。</p>
<h1>大标题</h1>
<p>示例文字。</p>
<h1>大标题</h1>
<p>示例文字。</p>
</body>
</html>
这部分代码的运行结果如图20-7所示。
图20-7 对多个项目追加连续编号的示例
相关HTML 5与CSS 3权威指南：在多个标题前加上连续编号