CSS counter-increment 属性经典详解

来源：清泛原创 2015-11-27 23:35:15 人气：我有话说( 0 人参与)

CSS Counters其实就是css的计数器，灵活使用它就能仅用css解决很多编号等问题，而非写逻辑代码搞定。下面通过两个实例详解它的用法：<!DOCTY...

CSS Counters其实就是css的计数器，灵活使用它就能仅用css解决很多编号等问题，而非写逻辑代码搞定。下面通过两个实例详解它的用法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
    counter-increment:section;
    content:"Section " counter(section) ". ";
}
h2:before 
{
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}
</style>
</head>

<body>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 counter-increment 属性。</p>

<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
</html>

运行结果：

下面详细介绍一下其中原理：

section， subsection 是定义的两个计数器的名字，counter-reset 是初始化计数器，默认从0开始，即：counter-reset:section; 等同于 counter-reset:section 0; 当然也可从其他数字开始计数。
counter-increment 使计数器增长，counter(section) 显示section计数器当前的值，可以前后拼接字符串，如"Section " counter(section) ". "。

结合上面实例，编号设计意图是：定义节点、子节点两个计数器，h1标签前面显示节点计数，h2标签前面显示节点.子节点计数，并且计数器自增。节点计数器body样式中初始化为0，子节点计数器在h1中初始化为0，即节点计数器在整个body范围内自增，子节点计数器遇到h1清零，然后在后续h2中自增，这就实现了h1、h2两级编号。

实例二：
清泛网(tsingfun.com)的盖楼模式的评论，本来html代码中没有楼层编号，但是可以通过CSS counter实现楼层显示，如图：

原理：定义一个计数器，遇到一段评论计数器清零，每段评论中.content > span:before 标签中自增并显示计数。具体实现，有兴趣的话可以自己查看清泛网源代码，这里不再赘述。

总结：CSS counter有时能实现意想不到的效果，各位不妨多试试。