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未支持。大写拉丁字母

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Tester</title>
        <style type="text/css">
            body{
                counter-reset: section;
            }
            h1{
                counter-reset: subsection;
            }
             
            h1:before{
                counter-increment: section;
                content: counter(section) ".";
            }
             
            h3:before{
                counter-increment: subsection;
                content: counter(section) "." counter(subsection) " ";
            }
        </style>
    </head>
    <body>
        <h1>Javascript Tutorial</h1>
        <h3>Basic grammar</h3>
        <h3>Hello world</h3>
        <h3>First project</h3>
         
        <h1>Javascript Tutorial</h1>
        <h3>Basic grammar</h3>
        <h3>Hello world</h3>
        <h3>First project</h3>
    </body>
</html>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值