碰到的坑
小伙伴你们是否有碰到以下的情况，排行榜前3名的样式不一样，你们是怎么处理的么？
本来我也是直接每个文字，单独定样式的，感觉这样好累。赶紧搜搜有啥好方法实现，最开始想到的是ol列表，但是没办法控制样式，遂放弃，继续深入。着实让我找到了好方法——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。
//定义计数器section，不设置number默认为0 counter-reset:section; //定义计数器section，设置number为1 counter-reset:section 1; //定义多个计数器，并设置numbercounter-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-child{background:#090}