css-counter属性

前言

博客原文查看可点击《CSS counter属性》哦！
本文引用张鑫旭大大博客文章《CSS counter计数器(content目录序号自动递增)详解》，一直觉得鑫大大是个被程序员耽误的小说家，他的文章风格大都以浅明深，诙谐幽默，可点击这里查看原文哦。

好了，It's my show time!
在了解到counter之前，想到计数应该属ul，ol标签元素了吧，但它们的递增规则单一，无法实现自定义的递增。而counter属性完美的解决了这个问题，让我们一起来看看吧。
首先，使用一个属性前，我们一定得了解一下它的兼容性，曾经被IE兼容性虐哭的我，不得不小心作为一个好用属性的兼容问题。

兼容性

I E	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
8.0+	2.0+	4.0+	3.1+	3.5+	3.2+	2.1+	18.0+

看到这里是不是心里放松了很多，它的兼容性还是可以的接受的，范围不算局限。

counter的使用题要

CSS计数器只能跟content属性在一起的时候才有作用，而content属性貌似专门用在before/after伪元素上的。于是，就有了，“计数器↔伪元素↔content属性”的铁三角关系

counter成员

counter的成员主要有三个：

counter-reset（计数器声明及初始值设置）
counter-increment（递增规则）
counter()/counters(计算结果生成)

counter-reset

counter-reset主要有三个属性。

none：默认。不能对选择器的计数器进行重置。
name num：name即标记计数器名称，num即记录计数器初始值。num非必写，默认为0。
inherit：规定应该从父元素继承 counter-reset 属性的值。

counter-increment

counter-increment主要有三个属性。

none：没有计数器将递增。
name num：name即选择递增的计数器，num即增量。num非必写，默认为1，可以是正数、零或者负数。
inherit：指定counter-increment属性的值，应该从父元素继承。

counter()/counters()

这是个方法，不是属性。类似CSS3中才calc()计算。

name：选择递增的计数器。
style：递增的数字样式：阿拉伯数字，罗马数字等，具体如下：

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

string：counters的属性，子序数连接符

注：多个计数器还可同时命名，接下来我们上代码看几个例子。

CSS：
1. counter-reset属性
.xxx { 
  counter-reset: count; /* 计数器名称是'count', 并且默认起始值为0 */
} 

.xxx { 
  counter-reset: count 4; /* 计数器名称是'count', 并且默认起始值为4 */
} 

.xxx { 
  counter-reset: count1 2 count2 3; /* 定义两个计数器'count1'和'count2',默认起始值分别为2和3 */
} 

2. counter-increment属性
.counter { 
  counter-increment: count 2; /*'count'以2阶段递增 */
}

.counter { 
  counter-increment: count -1;  /*'count'以1阶段递减 */
}

3. counter方法
counters(name, style);

.counter:before { 
  content: counter(count1) '\A' counter(count2);  /*'\A'使用inline水平元素换行*/
  white-space: pre; 
}

接下来看一个完整的例子。
效果如图：

css-counter_1.jpg


    一级标题
    
      二级标题
      二级标题
      二级标题
    
    
      二级标题
        
          三级标题
          三级标题
          三级标题
        
      
    
     
    
  
  一级标题

OK_{至此，关于counter的介绍就差不多结束了，可以在实践过程中发现和挖掘更有意思的操作，如果你有什么有趣的神操作，可以给我留言分享哦！啦啦啦}