css计数器tip

今天看了遍css计数器的文章。小小的总结一下：

css 计数器的属性

counter-reset:xiaoli;重置计数器的名字；

也可以同时声明两个：counter-reaet:xiaoli1 2  xiaoli2 3;默认为0；

counter-reset:xiaoli 2;计算从2开始，对于chrome负数也可以。

counter-increment:x;计数器以x递增可以为负数.

content:counter(xiaoli);

父元素counter-increment普照1遍 两个子元素没有普照，各两个子元素都为1；

父元素counter-increment没有普照 两个子元素普照1遍，各两个子元素分别为1，2；

counter:before,counter:after{content:counter(xiaoli) counter-increment:xiaoli1 2;}

还有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

white-space:pre;为换行；'\A'是隔开。

还有就是css计数器的内嵌的问题。counters;

其他的都一样就是content:counters(name,style)style为"."或者"-".

附上小例子

.reset1{ padding-left: 20px; counter-reset:xiaolili;font-size: 24px; font-family: arial black; color: #cd0000;}
.counter1:before{content:counters(xiaolili,"-")".";counter-increment:xiaolili;font-family: arial black;}

<div class="reset1">
     <div class="counter1">
 晓利1
 <div class="reset1">
     <div class="counter1">
 晓利1-1
</div>
<div class="counter1">
 晓利1-2
</div>
 
</div>
<div class="counter1">
 晓利1-3
</div>
</div>
  <div class="counter1">
 晓利2
</div>
  <div class="counter1">
 晓利3
</div>
   </div>