css计数器的三角关系

计数器 <-> 伪元素 <-> content属性
计数器的2个属性和1个方法

counter-reset

counter-increment

counter()/counters()

counter-reset是计数器重置，计数器命名，设置默认值
如:

.xxx{ counter-reset:counter-test; }
计数器名称是’counter-test’,默认值为0
.xxx{ counter-reset:counter-test 2;}
计数器名称是’counter-test’,设置默认值为2

counter-increment
计数器增加默认值为1，可以设置为任意整数(负数亦可)
如：

.counter1 { counter:apple; counter-increment:apple; }
.counter1:before { content:counter(apple) }
apple默认值为0,应用了样式counter1的元素第一个显示为1，如果还有第二个应用了
那么apple会增加1
.counter2 { counter:apple; counter-increment:apple 2; }
这里设置增量为2，即一次增加2

counter()/counters()这个是方法

counter()
- counter(name) name就是counter-reset的名称
- counter(name,style) style支持的关键字是list-style-type的值
  list-style-type
  - disc
  - circle
  - square
  - decimal
  - lower-roman
  - upper-roman
  - lower-alpha
  - upper-alpha
  - none
  - armenian
  - cjk-ideographic
  - georgian
  - lower-greek
  - hebrew
  - hiragana
  - hiragana-iroha
  - katakana
  - katakana-iroha
  - lower-latin
  - upper-latin

counters() 主要用于counter的嵌套
css:

1
2

.reset { padding-left: 20px; counter-reset: wangxiaoer; line-height: 1.6; color: #666; }
.counter:before { content: counters(wangxiaoer, '-') '. '; counter-increment: wangxiaoer; font-family: arial black; }

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 class="reset">
        <div class="counter">我是王小四的大儿子</div>
    </div>
  </div>
</div>