CSS创建一个计数器
作者：佚名 时间：2014-03-24
在HTMl和XHTMl中，使用<ol>元素可以创建简单的编号列表。但是更为复杂的编号列表，尤其是嵌套的编号列表，则不可能使用标记语言。但是，css提出了计数器(counter)的概念，它的值可以在浏览器显示文档时加以设定和改变。使用当前属性能够识别的特殊函数插入计数器的值，并用其他css属性改变计数器的外观和格式。
所有的css计数器都有一个名称。要创建一个计数器，仅在与其相关联的counter-reset或counter-imcrement属性中提到一个名称即可。如果该命名计数器的实例在当前文档嵌套级别中还不存在，支持css的浏览器会自动创建一个。因此，可以根据需要设置或重设计数器的值。例如，假设我们要使用<h1>元素作为章标题，用<h2>元素作为节标题。章节都是编号形式，在新的每一章中都要重要重新设置节标题。用下列指令可以达到想要的效果：
h1:before{ counter-increment: chapter counter-reset :section}
h2:before{counter-increment: section}
当支持css的浏览器遇到文档中的第一个<h1>元素时，它会生成章节的计数器，并将它们的值重设为0.同时，对于其后的所有计数器，支持css的浏览器都会通过counter-increment属性将章的计数器设为1，表示为Chapter 1,然后是2，等等。当在章中遇到<h2>元素时，节的计数器会根据h2样式规则得到增加，并按顺序为每一节编号。这里还要注意，节的计数器是由h1规则进行重设的，因此节的计数器会在每一章中重启（除非明确告诉浏览器要显示计数器，否则不会显示）
counter-reset和counter-increment属性都接受计数器名称列表，用它便可以在一个属性中重设或增加计数器组。还可以在计数器名称后提供一个数值，这样一来，计数器使用counter-reset就可以初始化为指定的值，而counter-increment会将值添加到当前的计数器中。也允许使用负数，因此如果需要的话，可以倒计时。
例如，发果我们希望文档从Chapter7开始，而且希望节的编号以2为增量增加，可以重写前面的示例，如下所示：
body{counter-reset: chapter6}
h1:before{counter-increment: chapter; counter-reset: section}
h2:before{counter-increment: section2}
请注意我们如何使用比所需的第一值小1的值在文档最早的可能元素中创建章计数器。当浏览器遇到第一个<h1>元素时，会生成计数器，将其设为3，然后增加章计数器。
计数器名称的范围就是在其中定义它的嵌套层，不必是整个文档的范围。如果在子元素中使用同一个计数器名名称，浏览器会在该级别创建一个新的计数器实例。在我们的示例中，所有的<h1>和<h2>元素都存在于同一嵌套层中，因此章节计数器的一个实例就对整个级别起作用。如果在该元素中嵌套了<div>标签，反过来它又会包含<h1>和<h2>元素。在那个新的级别上会创建这两个计数器的新实例。
这种嵌套行为对于嵌套的编号列表来说非常重要。如果将一个计数器与<li>元素关联在一起，然后嵌套多个有序列表，每个列表级别中都会有自己的计数器实例，而且每个级别上都会有单独的编号序列。
