CSS 2.1属性

counter-increment

你是否经常希望你可以让一个有序列表或者一篇文章的所有标题自动编号？不幸的是，目前尚未有CSS3属性支持。但是在CSS 2.1中，counter-increment 提供了一个解决方案。这就意味着它已经出现好些年了，而且在IE8中就已经支持了。

配合:before 伪元素和content 属性，counter-increment可以为所有的HTML标签添加自动的编号。即便是嵌套的编码也是支持的。

示例

要给标题编码，先将计算器重设一下:

body {counter-reset: thecounter}

下面的样式让每一个<h1>标题都有一个”Section”的前缀，然后其后面的数字自动的递增1(这是默认的，可以省略掉)，这里thecounter是计算器的名称:

.counter h1:before {
counter-increment: thecounter 1;
content:"Section"counter(thecounter)":";
}

示例

对于一个嵌套编码的列表，重设计数器，然后关掉<ol>的自动编码，因为它是无嵌套的:

ol {
counter-reset: section;
list-style-type: none;
}

然后，每个<li>设置为自动编号，分割符是一个点(.)，后面跟着一个空格

li:before {
counter-increment: section;
content: counters(section,".")"";
}

HTML代码：

<ol>
 <li>item</li> <!-- 1 -->
 <li>item <!-- 2 -->
  <ol>
   <li>item</li> <!-- 1.1 -->
   <li>item</li> <!-- 1.2 -->
  </ol>
 </li>
 <li>item</li> <!-- 3 -->
<ol>

浏览器支持: CSS 2.1.，所有的现代浏览器，IE 7+.

扩展阅读: W3C，CSS content, counter-increment 和 counter-reset详解

出处：前端观察
责任编辑：bluehearts

上一页 CSS的未来:一些试验性CSS属性 [5] 下一页 CSS的未来:一些试验性CSS属性 [7]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。