CSS content, counter-increment 和 counter-reset详解[译]（3）

CSS content 属性和:before 、:after 伪元素的浏览器支持情况：

因为在IE6 和IE7 以及IE8的IE7兼容模式中，:before 和:after 都不被支持，所以可以认为它们都不支持content 属性，测试也就毫无意义，所以这个列表将IE6、IE7和IE8的IE7兼容模式忽略。——神飞

counter-increment 和counter-reset CSS 属性

Counter并不能单独工作！如果你只是写 p:before {content: counter(subtitles, decimal);} ，每个段落只会在它前面有个0。为了更容易的理解这一点，让我们再来看一个实例：

• footnotes

• creating numbering for outlines: 计算篇数、章节、和段落，在每一个新的章节重新开始计算段落，并为每新的一篇重设章节。

使用CSS counter 语句你可以在你的页面里面定义很多个计数器，想定义多少都可以，并可以递增计数器或重设计数器。

<p> 在本段中，我加入了<cite class="footnote">脚注引用。</cite></p>
cite.footnote {counter-increment: citations;}
cite.footnote:after {content: counter(citations); vertical-align:text-top;}

在我们上面的例子中，我们想在每个<cite class="footnote">上增加计数器，然后在:after伪元素上用content属性添加脚注的数字：诡异的是，这在浏览器中并不能工作。你能发现我的错误吗？为了使用一个计数器(counter)，你应该提供一个名字(name)。在上面的情景中，这个名字就是”citations”。 当然你也可以指定样式。如果未定义样式，样式就会默认为数字。这些值可以包括所有的list-style-type 值，尽管只有<ol>值懂得一个计数器。这些值包括decimal | decimal-leading-zero | lower-alpha | lower-greek | lower-roman | upper-alpha | upper-roman | lower-latin | upper-latin | hebrew | georgian 等等。

在生成的内容在，你可以引入多个计数器。比如，在法律术语中，通常在已编号的章节里面还有章节。这是可以用CSS计数器实现的。

<h1>第一个标题</h1>
<h2>章节</h2>
<p>文字....</p>
<h2>另一个章节</h2>
 
<p>文字....</p>
<h2>再一个章节</h2>
<p>文字....</p>
<h1>另一个标题</h1>
<h2>章节</h2>
<p>文字....</p>
<h2>另一个章节</h2>
 
<p>文字....</p>
<h2>再一个章节</h2>
<p>文字....</p>

在每个h1的前面添加计数器，并在每一个h1后面重设h2的计数器， CSS 可以这样写：

h1 {counter-increment: headers;counter-reset: subsections;}
h1:before {content: counter(headers, upper-roman);}
h2 {counter-increment:subsections;}
h2:before {content: counter(headers, upper-roman) "." counter(subsections, lower-roman) ":";}

现在所有的<h2>被加上了它们的标题数字和章节数字。

关于这些代码需要注意的是：请注意在h2:before 声明中我们包括了两个计数器：标题计数器和章节计数器。在每个调用中我们都定义了样式，因为样式并没有被继承。同样，我们在声明中添加了字符串。注意我们是用引号来引入字符串的，而不是用计数器，并且除了我们的内容值之外，没有相关元素。为了在同样的样式属性中联合多个计数器ID，可以使用空格将计数器ID值连在一起。

计数器的递增是通过counter-increment 声明来实现的。尽管默认的值从1开始递增，我们也可以从其它数值开始递增。你可以重设计数器。在每个标题后面重设章节的计数器看起来是比较容易接受的。要重写默认值1，并在每个<h1>元素后重设数字，CSS可以这样写：

h1 {
  counter-increment: headers 10;
  counter-reset: subsections 5;
}
h2 {
  counter-increment:subsections 2;
}

最后，请查看本文中使用的例子的演示：cssContent_test.htm ，你可以对照演示来尝试自己做一些测试来。