排行榜妙用——CSS计数器
Posted threenerd
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了排行榜妙用——CSS计数器相关的知识，希望对你有一定的参考价值。
本来我也是直接每个文字，单独定样式的，感觉这样好累。赶紧搜搜有啥好方法实现，最开始想到的是ol列表，但是没办法控制样式，遂放弃，继续深入。着实让我找到了好方法——CSS计数器
CSS计数器
先看个简单的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> bodycounter-reset:num; div:aftercontent: 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。
//定义计数器section，不设置number默认为0
counter-reset:section;
//定义计数器section，设置number为1
counter-reset:section 1;
//定义多个计数器，并设置number
counter-reset:section 1 abcnum 3;
2、counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。number 可以是正数、零或者负数
//递增counter+2
counter-increment: counter 2
//递减counter-2
counter-increment: counter -2
//递增counter+2，递减ber-2
counter-increment: counter 2 ber -2
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） 直接实现
//选取第2个标签
li:nth-child(2)background:#090
//选取大于等于4的标签
li:nth-child(n+4)background:#090
//选取小于于等于4的标签
li:nth-child(-n+4)background:#090
//选取偶数标签
li:nth-child(2n)background:#090
//选取奇数标签
li:nth-child(2n-1)background:#090
//自定义选取标签，3n+1表示“隔二取一”
li:nth-child(3n+1)background:#090
//选取最后一个标签
li:last-childbackground:#090
知识有限，写的东西有不足或者错误信息还望各路大神指点指点，共勉进步。
src="http://player.youku.com/embed/XNzkxMTc3OTM2" allowfullscreen="" frameborder="0" height="498" width="510">
src="http://player.youku.com/embed/XNzkxMTc3OTM2" allowfullscreen="" frameborder="0" height="498" width="510">以上是关于排行榜妙用——CSS计数器的主要内容，如果未能解决你的问题，请参考以下文章