您的位置：首页 > Web前端 > CSS

CSS计数器妙用

2016-05-03 10:52 225 查看
做web的经常会遇到类似排行榜的需求, 特别是要求前n名的样式和后面人不一样. 通常大多数人对于这个需求的做法都是在后端处理好排名名次, 在前端填入内容, 然后针对前n名做特殊的样式处理. 但是这样有时候觉得很烦, 逻辑又长又啰嗦, 那有什么更好的办法呢? 这个时候我们其实可以用到CSS计数器.

CSS计数器

先看个例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
body{counter-reset:num;}
div:after{content: counter(num);counter-increment:num;}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>


结果:



计数器主角:



详细解释:

1、counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。

2、counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。number 可以是正数、零或者负数.

3、counter(name, style)，注意跟上面的content不一样，作用单纯的显示计数。

style：设置递增递减显示的文字，可以是英文字母，或者罗马文。跟ol列表支持的 list-style-type 值一样

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


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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.list { padding-left: 20px; counter-reset: tjq; line-height: 1.6; color: #666; }
.h1:before { content: counters(tjq, '-') '. '; counter-increment: tjq; font-family: arial black; }
</style>
</head>
<body>
<div class="list">
<div class="h1">a
<div class="list">
<div class="h1">a-1</div>
<div class="h1">a-2</div>
<div class="h1">a-3</div>
</div>
</div>
<div class="h1">b
<div class="list">
<div class="h1">b-1</div>
<div class="h1">b-2</div>
<div class="h1">b-3</div>
<div class="h1">b-4</div>
</div>
</div>
<div class="h1">c
<div class="list">
<div class="h1">c-1</div>
<div class="h1">c-2</div>
</div>
</div>
</div>
</body>
</html>


效果:



具体的小伙伴们可以敲敲代码试试，自然就懂了其中的逻辑的。说其逻辑还真不知道怎么说。具体的可以看看：

http://www.zhangxinxu.com/wordpress/2014/12/css-counters-pseudo-class-checked-numbers/

http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/

兼容性:

1、相比传统的
ol
,
ul
列表计数，CSS计数器的优势就在于灵活与强大，不足就是IE6/IE7不支持。

2、一个元素，如果设置了
counter-increment
, 但是其
display
的属性值是
none
或者含有
hidden
属性（针对支持浏览器），则此计数值是不会增加的。

总结:

css计数器还是有一定的便利的，毕竟现在ie6 7,很多都不去兼容，放可以大胆使用，相对于前面所说的写死的方法灵活多了。

彩蛋:

有时排行榜前几位会有不同的样式，大可以用css3（:nth-child）直接实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
body {
counter-reset: num;
}

div:after {
content: counter(num);
counter-increment: num;
}
//小于等于3的内容字体颜色设置红色,且加粗
div:nth-child(-n+3) {
color:red;
font-weight:bold;
}
//大于等于4的内容改变背景颜色#090
div:nth-child(n+4) {
background: #090;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>


原文地址: http://www.cnblogs.com/chenrf/p/5439822.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航