CSS计数器:counter-increment与counter-reset

分类栏目:用户体验 - 前端开发

19998

发布于 3 条评论

CSS-counter-increment-counter-reset

在前两天发布的一篇文章《因为CSS3,动画将一切皆有可能》,示例页面当中使用了counter-reset属性和counter-increment属性来对<a>标签进行自动排序输出,这两个属性是css属性当中的计数器,可以按照设定的方式自动计算出数值,在很多场景下具有很大的灵活性,具体的功能代码如下:

.main {counter-reset:demo;}
.main a {counter-increment:demo;}
.main a:before {content:counter(demo, decimal);}
<a></a>
<a></a>
<a></a>

看到这里,也许有不少人表示比较陌生,而且代码也是非常的简单。那么今天就为大家简单的介绍下这两个属性以及结合content属性的一个简单的例子。

counter-reset 属性

用法:counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。

说明:利用这个属性,计数器可以设置或重置为任何值,可以是正值或负值。如果没有提供 number,则默认为 0。

注释:如果使用display: none,则无法重置计数器。如果使用visibility: hidden,则可以重置计数器。

counter-increment 属性

用法:counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

说明:利用这个属性,计数器可以递增(或递减)某个值,这可以是正值或负值。如果没有提供 number 值,则默认为 1。

注释:如果使用了display: none,则无法增加计数。如使用visibility: hidden,则可增加计数。

我们了解后就来看看一个简单示例:

1、CSS代码

body {
	counter-reset:jiawin;
}
h1 {
	counter-reset:subjiawin;
}
h1:before {
	content:"类别 " counter(jiawin) ". ";
	counter-increment:jiawin;
}
h2:before {
	counter-increment:subjiawin;
	content:counter(jiawin) "." counter(subjiawin) " ";
}

/** 以下为页面装饰代码 **/
body, h1, h2 {padding:0; margin:0;}
body {background-color:#fee0ef;}
.main {width:600px; margin:100px auto; border-radius:5px; height:auto; overflow:hidden; box-shadow:0px 1px 5px rgba(0,0,0,0.5);}
.main h1 {background:#936; color:#FFF; padding:5px; border-top:1px solid #df94b9; border-bottom:1px solid #df94b9;}
.main h2 {background-color:#c47da0; color:#FFF; padding:5px; border-bottom:1px solid #cd8fae;}

2、HTML代码

<h1></h1>
<h2></h2>
<h2></h2>
<h1></h1>
<h2></h2>
<h2></h2>
<h2></h2>
<h1></h1>
<h2></h2>
<h2></h2>

查看预览下载附件

在这个示例中,我们不单单运用了counter-reset属性和counter-increment属性而且还配合了content属性的运用,这三个属性配合起来使用也是挺不错的,在布局当中有很大的灵活性。关于content属性,相信大家也是比较熟悉的,大概的用法如下:

content:string|url|counter(name)|counter(name, list-style-type)|counters(name, string)|counters(name, string, list-style-type)|attr(X)|open-quote|close-quote|no-open-quote|no-close-quote;

大家是否还记得之前的一篇文章《CSS伪元素before、after妙用:制作时尚焦点图相框》,在这篇文章中也就是运用了content属性,合理的运用好这些属性之间的差异和互补关系,将会给我们带来更多的方便,你认为呢﹖欢迎和你一起来探讨这个神奇的css国度……

全部评论 / 3

  1. 记得以前看到过一个CSS3实现的秒表,效果很酷

    大发 2012-12-12
    1
    1. Javin

      有看到好的东西,记得一起分享啊

      1号 Javin 2012-12-12