html每天重置的计数器,CSS计数器counter-reset/counter-increment

CSS计数器属性能够让你更自由的控制列表的编号展示形式,不再像以前那样只是使用list-style-type:decimal来简单的显示列表的序号,还可以实现2级序号,3级序号等。让别人一眼就能看懂你的列表。主要属性有:counter-reset/counter-increment/counter/counters。一起来看看是怎么样的。

html每天重置的计数器,CSS计数器counter-reset/counter-increment_第1张图片

HTML代码

  • test
    • subtest
    • subtest
    • subtest
  • test
  • test
  • test
  • test
    • subtest
    • subtest
    • subtest
  • test

CSS代码

首先要给父类设置counter-reset 即重置一个计数器,然后用counter-increment来递增需要的内容,最后通过CSS的伪类content来输出:counter(list),list代表上面的counter-reset的一个值。也可以用counters。

body{counter-reset:list}

ul{counter-reset:sublist}

ul{list-style:none; }

div>ul>li:before{counter-increment:list; content:counter(list) '.';}

div ul ul>li:before{counter-increment:sublist; content:counter(list) '.'counter(sublist) '.'}

或者使用counters是同样的效果

ul{counter-reset:sublist}

ul{list-style:none; }

li:before{counter-increment:sublist; content: counters(sublist, ".") "."; }

演示

演示一 演示2

浏览器支持

不支持IE6-IE7.支持IE8和其他高级浏览器,适用于移动端

还有人根据这个来做出一些小游戏,来看看牛人是怎么写的。

CSS计数器与动态计数呈现

您可以狠狠地点击这里:使用CSS计数器动态获得选中元素个数demo

demo中的复选框,你选中几个,就是告诉你对应选中的个数,如下截图,本人土鳖,只吃过3种:

html每天重置的计数器,CSS计数器counter-reset/counter-increment_第2张图片

CSS代码很简单,如下:

body {

counter-reset: icecream;

}

input:checked {

counter-increment: icecream;

}

.total::after {

content: counter(icecream);

}

解释下就是,有个全局计数器icecream,每有一个复选框选中,计数值就会加1, .total就是呈现选中个数的那个标签,其任务很简单,呈现当前计数器值就可以了。

CSS计数器与数值计算小游戏

您可以狠狠地点击这里:CSS计数器实现数值计算小游戏demo

默认进入看到是这样样子:

html每天重置的计数器,CSS计数器counter-reset/counter-increment_第3张图片

选择对应的计算值后面就会呈现对应的结果:

html每天重置的计数器,CSS计数器counter-reset/counter-increment_第4张图片

当最后计算的值是72时候,就会反馈你成功了!

html每天重置的计数器,CSS计数器counter-reset/counter-increment_第5张图片

其实现主要借助CSS3选择器以及CSS计数器以及单复选框伪类技术。

CSS核心代码如下:

body {

counter-reset: sum;

}

input {

position: absolute;

clip: rect(0 0 0 0);

}

#number1:checked { counter-increment: sum 64; }

#number2:checked { counter-increment: sum 16; }

#number3:checked { counter-increment: sum -32; }

#number4:checked { counter-increment: sum 128; }

#number5:checked { counter-increment: sum 4; }

#number6:checked { counter-increment: sum -8; }

.sum::before {

content: '= ' counter(sum);

}

#number1:checked ~

#number2:checked ~

#number3:not(:checked) ~

#number4:not(:checked) ~

#number5:not(:checked) ~

#number6:checked ~

.sum::after {

content: ' (万岁!)';

}

其实原理跟上面的计算选中个数是一样的,不过这里呢,每个复选框计数值这里都是具体值(不是默认的1),最后,通过相邻兄弟选择器以及:checked状态判断最后结果是不是72,还是挺巧妙的。

大家有兴趣可以多多斟酌斟酌。

还有更多有趣的玩意欢迎大家去看看:http://codersblock.com/blog/fun-times-with-css-counters/

中文参考:zxx

你可能感兴趣的:(html每天重置的计数器)