做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>