css 计数器
早上浏览starof的::before和::after伪元素的用法时，看到提出的第四点，故着重研究了下，并对照张鑫旭前辈的demo的写了个测试例子。
首先，还是先来介绍下css计数器counter()是个什么东西，参考网址为http://www.w3cplus.com/css3/css-counters.html。
CSS Counters用到的属性
使用CSS Counters给元素创建自动递增计算器不仅仅是依赖于某一个CSS属性来完成，他需要几个属性一起使用才会有效果。使用的到属性包括：
**counter-reset**：此值是必需的。必须用于选择器，主要用来标识该作用域，其值可以自定义。**counter-increment**：用来标识计数器与实际相关联的范围。**content**：用来生成内容，其为:before、:after或::before、::after的一个属性。在生成计数器内容，主要配合counter()一起使用。**counter()**：该函数用来设置插入计数器的值。**:before**、**:after**或**::before**、**::after**：配合content用来生成计数器内容。
counter-reset
counter-reset主要功能用来标识计数器作用域，而且此值必须用在选择器上，必且是不能缺少的。共包括两个部分，第一个部分是自定义计数器名称，这一部分是必需的。第二部分是计数器起始值，此值是可选的。默认值为0。此值告诉标识组起始值是什么，所以说这个值非常有价值。因为，如果你设置的值为0，那么计数从1开始；如果你设置的值是-5，那么计数从-4开始。依此类推。
counter-reset自定义计数器名称时可以随意取名，但此名不能是CSS的关键词，比如none、inherit之类。
counter-reset属性可以包含一个或者多个计数器标识符，每个后面都可以跟一个整数值，如section 0 heading 0。如果元素都重置，并且增加一个计数器，计数器是第一次重置，后面值就会递增。如果不止一次指定同一个计算器，则将按指定的计数器做递增。
counter-increment
counter-increment属性是用来标识计数器与实际相关联元素范围。其第一个值是必需的，获取counter-reset定义的标识符。
counter-ncrement第二个值是一个可选值，是一个整数值，可以是正整数，也可以是负整数。主要用来预设递增的值，如果取值为负值时，表示递减。默认值为1。
content
content是和伪类:before、:after或者伪元素::before、::after配合在一起使用，主要功能用来生成内容。
counter()
counter()是一个函数，其主要配合content一起使用。使用counter()来调用定义好的计数器标识符。
counter()函数接受两个参数，而且两参数之间使用逗号(,)来分隔。第一个参数是counter-increment定义的属性值<identifier>,用来告诉该文档插入的计数器标识符名称是什么。第二个是用来设置计数器的风格，有点类似于list-style-type。默认情况之下取值为十制，但你也可以重置这个样式风格，比如upper-roman或者upper-alpha等。
介绍完毕，下面写两个demo。
第一个demo是根据w3cplus网的那个demo写的，但网上的写法我在本地测试没有效果，就只能把before标签拿出来了。首先看效果图：
这边html代码如下：
<dl>
<dt>term1</dt>
<dd>term1-definition1</dd>
<dd>term1-definition2</dd>
<dd>term1-definition3</dd>
<dt>term2</dt>
<dd>term2-definition1</dd>
<dd>term2-definition2</dd>
<dd>term2-definition3</dd>
<dt>term3</dt>
<dd>term3-definition1</dd>
<dd>term3-definition2</dd>
<dd>term3-definition3</dd>
</dl>
style样式如下：
dl { counter-reset: term 0; } dt::before{ counter-reset: definition 0; counter-increment: term 1; content: counter(term) '.'; } dd::before{ counter-increment: definition; content: counter(definition) '.'; }
demo2，先上效果图：
html代码如下：
<div class="reset"> <div class="counter">我是大儿子 <div class="reset"> <div class="counter">我是大儿子的大孙子</div> <div class="counter">我是大儿子的二孙子 <div class="reset"> <div class="counter">我是大儿子的二孙子的大重孙</div> <div class="counter">我是大儿子的二孙子的二重孙</div> <div class="counter">我是大儿子的二孙子的三重孙</div> </div> </div> <div class="counter">我是大儿子的三孙子</div> </div> </div> <div class="counter">我是二儿子</div> <div class="counter">我是三儿子</div> </div>
css代码如下：
.reset{ padding-left: 20px; counter-reset: son; } .counter:before{ content: counters(son, '-') '.'; counter-increment: son; }
