CSS:CSS3 计数器

CSS3里面有个很强大的工具，计数器，可以很方便地来给元素编号。

记得以前还想尽办法得想通过Struts2的迭代器来排序，结果发现受限于内容根本实现不了。。

Css3计数器总共需要3个东东：

1. counter-reset    其实就是计数器初始化，记住在必须在父节点初始化你需要的计数器，不然序号肯定是不对的，示例：

someSelector{ 
    /*some other code*/ 
   
    counter-reset: counterA;  /*计数器counterA 复位，复位值为0*/ 
    counter-reset: counterA 6;  /*计数器counterA 复位，复位值为6*/ 
    counter-reset: counterA 4 counterB;  /*计数器counterA 复位，复位值为4，计数器counterB     复位，复位值为0*/ 
    counter-reset: counterA 4 counterB 2;  /*计数器counterA 复位，复位值为4，计数器counterB复位，复位值为2*/ 
}

2. counter-increment    累加你的计数器，示例：

someSelector{ 
    /*some other code*/ 
   
    counter-increment: counterA;  /* 增加CounterA，每次加1 */ 
    counter-increment: counterA 2;  /* 计数器counterA，每次加2 */ 
    counter-increment: counterA 2 counterB -1;  /* counterA，每次加2，同时counterB每次减1*/ 
}

3. counter() 用这个"函数"就可以拿到你需要的数值了，语法如下：

content:counter(name)  
        counter(name,list-style-type) 
        counters(name,string) 
        counters(name,string,list-style-type)

name就是你计数器的名字，list-style-type可以用来指定计数器的样式，比如可以用1，2，3，4来计数，也能用a,b,c,d来计数，

list-style-stype样式如下：

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
取值：
disc:CSS1默认值。实心圆
circle:CSS1空心圆
square:CSS1实心方块
decimal:CSS1阿拉伯数字
lower-roman:CSS1小写罗马数字
upper-roman:CSS1大写罗马数字
lower-alpha:CSS1小写英文字母
upper-alpha:CSS1大写英文字母
none:CSS1不使用项目符号
armenianl:CSS2未支持。传统的亚美尼亚数字
cjk-ideographic:CSS2未支持。浅白的表意数字
georgian:CSS2未支持。传统的乔治数字
lower-greek:CSS2未支持。基本的希腊小写字母
hebrew:CSS2未支持。传统的希伯莱数字
hiragana:CSS2未支持。日文平假名字符
hiragana-iroha:CSS2未支持。日文平假名序号
katakana:CSS2未支持。日文片假名字符
katakana-iroha:CSS2未支持。日文片假名序号
lower-latin:CSS2未支持。小写拉丁字母
upper-latin:CSS2未支持。大写拉丁字母

这里有个官方的例子，很好的体现了计数器的功能：

    
        
        
        
    
    
        
Javascript Tutorial
        
Basic grammar
        
Hello world
        
First project
         
        
Javascript Tutorial
        
Basic grammar
        
Hello world
        
First project