CSS:CSS3 计数器

最新推荐文章于 2021-12-14 08:22:20 发布

黑色的咖啡

最新推荐文章于 2021-12-14 08:22:20 发布

阅读量2.1k

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/jearbilove/article/details/25538979

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>