css中的counter计数器

末蓝、 2022-05-28 12:13 254阅读 0赞

### 作为程序猿，代码比什么都有说服力，嗯，所以废话不多说，直接看吧，认真看完了，就一定有收获（内容有点多，需要一点耐心哦,我是一点一点写的，咱也一点一点看呗） ###

### counter:是css计数器，只能跟content属性在一起使用的时候才起作用，而content属性专用在before/after伪元素上 ###

### counter计数器的属性和方法 ###

属性有：counter-reset、counter-increment

方法有：counter、counters

counter-reset：可以理解为“计数器-重置”的意思，有两个参数：name（必选参数）/ start（可选参数，默认值为0）。主要作用就是给计数器起名字，顺便告诉从哪个数字开始计数。

OK, 这里，我们先看个简单的counter-reset的例子：

![20180405094905886][]

counter-reset的计数重置可以是负数，例如-2。也可以写成小数，例如2.99当成2处理，不过就是IE和FireFox都不识别，认为是不合法数值，直接无视，当作默认值0来处理；Chrome，任何小数都是向下取整。

counter-reset，可以给多个计数器同时命名。中间直接用空格分开，其它的都不可以

嗯、看例子呗

![20180405100929520][]

另外，counter-reset还可以设置为none和inherit. 干掉重置以及继承重置。

**2. counter-increment：就是“计数器-递增”的意思，值为counter-reset的1个或多个name。后面可以跟随数字，表示每次计数的变化值。如果不写，则使用默认变化值1**

css计数器的计数是有一套规则的，具体来说就是：counter-reset唯一，每counter-increment一次，counter-reset增加一次计数。

**下面我们来看一下例子理解一些**

![20180405095054583][]

这里counter-increment在p标签中，counter-reset值增加，默认递增1，于是计数从设置的初始值3变成了4，count就是这里的计数器，自然伪元素content值counter(count)就是4

**②** 当然，也可以普照自身，也就是counter-increment直接设置在伪元素上：

依然是使用一次counter-increment全局的计数器+1，所以，显示的数值还是4，效果与上面的一样。

**③** 如果父元素和子元素都设置counter-increment，结果会如何呢？看下面的例子

很简单的，父元素增加1，子元素也增加1，counter-reset 设置的计数器值增加2次，计数起始值是2，于是现实的数字就是4 啦！

总而言之，无论位置在何方，只要有counter-increment，对应的计数器的值就会变化，counter()只是输出而已！

**counter-increment其他设定  
① counter-reset**可以一次命名两个计数器名称,counter-increment自然有与之呼应的设定，也是名称留空就可以了。

![20180405101316395][]

counter-increment:每次增加的数字默认是1，当然我们也可以自己设置增加的数字是什么，就像上面的例子，可以把增加值设置为2

还可以是负数，例如：

counter-increment: counter -1

就有了递减排序效果啦！

**③** counter-increment值还可以是none或者inherit

**3. counter()/counters()**  
这是个方法，作用很单纯显示计数。不过名称、用法有多个：

**①** 目前为止，从上面的例子中我们用的比较多的就是下面的这种了

counter(name) /* name就是counter-reset的名称 */

**②** 那下面这个语法是什么意思呢？

counter(name, style)

这里的style参数还有有些名堂的。其支持的关键字值就是list-style-type支持的那些值。作用是，我们递增递减可以不一定是数字，还可以是英文字母，或者罗马文等。

看个例子呗

![20180405102138335][]

**③** counter还支持级联。也就是一个content属性值可以有多个counter()方法

![2018040510254115][]

**④** 下面介绍counters()方法。看似值多了个字母s, 但表意大变身。counters几乎可以说是**嵌套计数**的代名词。

基本用法为：

counters(name, string);

其中，string参数为字符串（需要引号包围的）（必须参数），表示子序号的连接字符串。例如的1.1的string参数就'.',1-1的string参数就是‘-’..

嗯、直接看例子喽

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <style>
            li{list-style:none;}
            .father { padding-left: 20px; counter-reset: count; line-height: 1.6; color: #666; }
            .son:before { content: counters(count, '-') '. '; counter-increment: count; font-family: arial black; }
        </style>
    </head>
    <body>
    <ul class="father">
        <li class="son">我的爱好
            <ul class="father">
                    <li class="son">爬山</li>
                    <li class="son">追剧</li>
                    <li class="son">旅游</li>
            </ul>
        </li>
        <li class="son">我的偶像
            <ul class="father">
                <li class="son">王昱珩
                  <ul class="father">
                      <li class="son">最强大脑第二季选手</li>
                      <li class="son">最强大脑第五季水之队队长</li>
                  </ul>
                </li>
                <li class="son">胡歌</li>
                <li class="son">陈默</li>
            </ul>
        </li>
        <li class="son">web前端</li>
        <li class="son">啦啦啦啦啦</li>
    </ul>
    </body>
    </html>

如下图所示

![20180405113156122][]

是不是很奇妙，就出现了上面的效果

**⑤counters()**也是支持style自定义递增形式的。

counters(name, string, style)

与counter()的style参数使用一致，不赘述。

### 注意： ###

一个元素，如果设置了counter-increment, 但是其display的属性值是none或者含有hidden属性（针对支持浏览器），则此计数值是不会增加的。而visibility：hidden以及其他声明不会有此现象。

学完了，让我们一起来看看一些有意思的小实例吧！

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>counter小实例</title>
        <style>
            #box{width:300px; height:300px; background:greenyellow; padding:30px; margin:100px auto;
            counter-reset:count;
            }
            lable{margin-left:20px;}
            .check{counter-increment:count;}
            .count:after{color:red; font-size:20px; content:counter(count);}
        </style>
    </head>
    <body>
    <div id="box">
        <p>选出你喜欢的他或她</p>
        <input type="checkbox" /><lable>胡歌</lable><br/>
        <input type="checkbox" /><lable>王昱珩</lable><br/>
        <input type="checkbox" /><lable>鲍云</lable><br/>
        <input type="checkbox" /><lable>梁紫晨</lable><br/>
        <input type="checkbox" /><lable>陈默</lable><br/>
        <input type="checkbox" /><lable>唐嫣</lable><br/>
        <input type="checkbox" /><lable>杨幂</lable><br/>
    <span class="count">你总共选择了</span><span>位</span>
    </div>
    <script>
        var aIpt = document.getElementsByTagName('input');
        var len = aIpt.length;
        for(var i=0;i<len;i++){
            aIpt[i].index = i;
            aIpt[i].onclick = function(){
                if(this.checked){
                    this.className='check';
                }else{
                    this.className='';
                }
            }
    
        }
    </script>
    </body>
    </html>

![20180405152540328][]

上面的是效果图，下面的总数会随着你选择的人数而不断变化，是不是很简单啦

### 由于计数器是伪元素控制显示的。因此，我们几乎可以应用各种CSS样式，各种定位等。所以，基本上，只要有有序序号呈现的地方，就能使用CSS计数器。    ###

嗯、分享结束，内容有点长，主要是想要一次把这些知识搞清楚，有耐心的看完了，一定会有所收获的。

[20180405094905886]: /images/20220528/fcde3d2e84c84a7d8b3c333250b691e5.png
[20180405100929520]: /images/20220528/98d5cd0b108f4ee7bfdd295b14d00cf9.png
[20180405095054583]: /images/20220528/6c1bb6bd18e84ac0a6b584b41a9121b3.png
[20180405101316395]: /images/20220528/f22b6046c82242de9b5d6a5a687f56e5.png
[20180405102138335]: /images/20220528/963c32042f8145e0937be3997d3086f7.png
[2018040510254115]: /images/20220528/238e55362ea1419b962a49d413a363a9.png
[20180405113156122]: /images/20220528/1600eb7fa8104d3f9647fbbfd3972406.png
[20180405152540328]: /images/20220528/5d54386531364ab5948922ec88eb377d.png