做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>
结果:
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABuCAIAAADu5AdXAAABlElEQVRoge2awZHDIBAEiYuAiIc4LgBel8MFQDC+B5IlJMHoNbtUTZdffnUBZnYXh5/fP1ef8HGGhBASQkgIISGEhBDLCdUcQyoUlcZcqKQQghehJuNFqKQQQsz1U5IPoS8SkhBCQggJIZYLVzoSQkgIsYxQzTF8ibnaCjWbTWNTY92OT0I1x17g9gVZ6E5JtH17JVQSb89eCH0Lfgpv0p6a91Mh7to0hkLdT5/Is1CzoRZmO8N7iL82jQehLjXo+bFMuJohIYSEEOsInW4j6h05iY49OYjV2UjoosCsYF+dIWdC5KjFBZqHvuwCdY3WbIOYx/pV58qcND6vUL9FNUcHfdnxOsWt9tcJVyskhJAQYkEhbsH4cmDlRsigIJoJtQzLXrZsj1QnZ+hIeBdC54LDgVBf/9gLDUZ6hiVsj/0KXZCQMySEkBBCQoiR0LmTprbTAyHqfKFj8tdTkwfFST1k4zOeD8V4FCHmQ8/r83hJDgZWHeYjvSvGQ887xFtgoSnsScDFodYUdkNCCAkhJISQEOIfwDvaFcClJCkAAAAASUVORK5CYII=" alt="" />
计数器主角:
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsgAAABxCAIAAABHk8K1AAARVElEQVR4nO2cPW7ryBJGmdrazCSKlMwmLiYVYG9hgLcCAcqUDDChY0OJo4m9AdmJc++AS7gv0B/ZXVVdZIvstn0OLi6oZv9Ut0pVH5ukm98AAAAAN6L5/fv3MwAAAEA2V2HxATAveB0AQA4VRlGEBZQErwMAyKHCKIqwgJLgdQAAOVQYRREWUBK8DgAghwqjKMICSoLXAQDkUGEURVhASfA6AIAcKoyiCAsoCV4HAJBDhVE0LSyaFEFN7SNAjPGTaJrm77///ug7UtLHRM8EAPiufFVh8ddff2mnEBaQQ1JYjJazuB8A/ARMYfHvr37k/PWvcqL543//pU/5Tbr9jkXTNP/88w+RHZJk7liIrfA6APg5qFH0JBAuWuLj31/HD9GJj39/ndSDcWqYScN2LBppA6PpXFyKV5nDjIIfg+h1I5wnqXoBAL4lSu6OJUL6jHVqoEkuYWEH7q6e+OA+N7jJuRUiuhleBwA/CjmK/ve/PzSJcDp1olfDODXQpAHC4qOzY6EJiyDuj7QLfgZOYfGhPzwR+CGKFgB+FHIUNfce+vqhaZrrcxTGqUEm3X7H4lJIfAcbW1iIOlVzM805AQC+MYN3LKJKkn4wTrlMusEzFpdThHgYhP2Mhf+tkKT+AAD4lgx+xkKpKqoH45RtEn/HAopx21sh8UcAgO/N4LdCwvc8jvXO74topwaa5BIWf/755+Xj8c5I/EIpIR6GgrAAAMjB+jsW0RMTJ2ERcBETxqmBJnmFRTAcwgLyyfwDWXEJAMCP4uv95c2LgLjsWHRPiUrCzgQAXWw5Gz8R/KFsXeB1APAz+XrCAmBS8DoAgBwqjKIICygJXgcAkEOFURRhASXB6wAAcqgwiiIsoCR4HQBADhVGUYQFlASvAwDIocIoirCAkuB1AAA5VBhFe8ICAAAAIJOrsGgB5gWvAwDIocIoirCAkuB1AAA5VBhFERZQErwOACCHCqMowgJKgtcBAORQYRRFWEBJ8DoAgBwqjKIICygJXgcAkEOFURRhASXB6wAAcqgwiiIsoCR4HQBADhVGUYQFlMTwuqZpRnZ62Cyb5eYwyI510zRN06yn/xGMn9cgJphR1/L8WdxqHex+bmuzB20Usfz4HdklI8YSqxmVPf3M5LcwnApz9/TC4m37tFi9vhVqDnVTh7B4Xk8jKS5TMNJbo5MxcmdGI2SWQteq2LzkRIwKl2rJ8nhQ0ZigwmibR6C1DSyxR7ENML6FcfXFcs/3BTWgRdHDZtn5uma4aOqZhLCAYtjCYmREG5pKD5vlNL86MatpQTxZMoDujG4kLAL78/NKMq0m18QWDd1+NBfSehg6O4+vDv2Kk+tj1DH1QFrnGaMkh4b5UaLoYbO8hrXbXV94TUoJi7ft0+J+t7jbLe6etkfDDq+rU8lutf28Vlu9bh9O5Yu7l32/Zqfy53Z1LjyLhiHN4duged3gsNX93Rw2y2a5Xl/Uek80dFT8sX5X1h9rRlUu/W/W3Q6leuos7Ijc6CnTmml4URLPaLmMz4uWSxOMTTLykAdPMjP6146dJXYFu3M/2vd7mYtzDQ0b7DWM2yb797SND6ASXJsCk10+iSSFxf5lcf+yPx8/7tu2fX+83z2eiq7HR/1xLm/3D7vFw3srbDl8bld9OXKp5moO34nJhMU193bvc/SS8uWX1k/V3frX42Mq7vww5a4csxgU5RMzjc/EM4rq64ugbpfGyS8/zRjrEP8fnNUGjTVKayZyLUOPmFQyAcd92tJBq+BxlRsKi6Q9UByXsHhe17RjsX8I9wmCTN9TBkH56vUtVgb7l97Hw+tKqqY2h2+FISzGR/wglV7VQfDbOmyWy83BTMOK+FC7imYhTk2bbzz39GS7iNY6Ldf1ipbgg7M2/jra/8GC2L4R92AfGMd+xEHtRfN0pXVi9CCuqmhDPFY8RLzs2ojadGBS0sLies0xEwlh0dtdOOJUAJaw6NzduNz1QFj8SIY+2eMKXoI4OH48vynRYf2cFBZi3lW6Uqy1k5YzixizDa1ICIvUIkho2cVIdUba0+poaSwz08fYlthWxaPYaHPpmqdZ7pmgUS6OKNYRKxv9213BnCSi6Oyqoq1gx8LoFmHx/ZlDWKg7FlL9kTsWlrXJXJvMczp9M8bsWHTbDhAWrZL8PJONk67RRBvFzuJiW7FzZz/OlGnMS0vk4uzEY9tssYfkN6V9rf6xjInAPFhR9HmtPQE2Kbd9xkJSBr0e2jbeBXnbv78NaA7fCdHrjFivRi41lfbkepg9D8/P0W6E/oyF/qTCpStpIkGJON/g2ArQumiQn7GIXqb1LIJhpJi0jLnYvcXHnu9d69mTX51m2D0boyfHCiZlO4k9bnIdPAd2n86lEAUHzIMqLKZ6jz7NsLdCzglefyvkrdvq9PH6DojwVsj5xZAhzeHbcLMdi+jhzSv9X5bwGkWUadW3Qvp5V3ojw7LWmSMTAVrYjzlbsF6L+ytXO+UVSjxjEVjlz4JiMtOwVyNYuhFJUUuHgyZikMzczhw/yB/sdbgs7K3WMGkPFEGJovFNz/m2LvjLm1CSSW6F1Ec3d7ap6/W2ymlqhiU1QavMVzsrao44KdoCRRzCqGAcJ7G/XHG+mtnOZD+oPGmP3WdykaE4FebuhLAInrIs/m/+BYJJcf4kvm5E08wWM6WnYSni9OnMUkZy7VbT+hGb+JOiWCiWiwaPwOhWq2DYE9exCfqx11M0UlzD5AShIF9PWABMCl4HAJBDhVEUYQElwesAAHKoMIoiLKAkeB0AQA4VRlGEBZQErwMAyKHCKIqwgJLgdQAAOVQYRREWUBK8DgAghwqjKMICSoLXAQDkUGEU7QkLAAAAgEzYsYBi4HUAADlUGEURFlASvA4AIIcKoyjCAkqC1wEA5FBhFEVYQEnwOgCAHCqMoggLKAleBwCQQ4VRFGEBJcHrAAByqDCKIiygJHgdAEAOFUZRhAWUBK8DAMihwij6xYXF2/ZpsXp9K20GjEX0uqZpksdBiV0tOOXp3+jE6G0Qzob2KIM68ZR7aoqtLsQfAWA6Kszd5YTFT9MEP22+PjSvi9OYmKLiNGbns6QQGaQVMrPm0FG0FfBkcf8pTWrE/xtG2jYDwA3Rouhhs+zEhvWcCR5hMRc/bb4+bK9LKgYtjRmCw+hKq5DsbcTEjQw9yGbx2DmWUdkut82OPwLAdChR9LBZXsXEYbNslpvDjCalhMXb9mlxv1vc7RZ3T9ujYYfX1alkt9p+Xqt1Eufl4/Fg+3Cqv7h72fd76HTyuV2dC89d9Zo/vAu2GaNI9ksdauO+PK4uDS91zovgMTgxX3DK2Ua5Au6msfij0c/QscQ+R2dNpyCwKwxSFc6x4jqisrF1g/ZlAcAUuKLoYbOccdMiKSz2L4v7c5Levzzu27Z9f7zfPZ6KrseWsLjWb/cPp3QeXcF/bld9mXKp1mkekBwltj/q0Bj3pCH2D1c9ce3ZZ7A+X2j1ZyziBBZkMq0wPggyoljBHqvbROxtEIa1I2w2+kmOZUwz7idpttgD2gJgalzC4nld047F/iG8vBYEhJQ4g72EZHm7f+l9PLyuxGp9kqMk7feMKx/7DFbnC22besbCmcNs/ZHscNBYhpFJgiwe53i/zXEnojpJjtW611As6XZoYBgGAJmkhcVhs5z3IYuEsOhdlB/JFBCWsOjcLLjcRBCaR/c19FHS9nvGVYWF02CEhUpSWNiJKpmixFwYpzr/WN3y4H9/crWN99jcRpl+3FjaaniMMQZyTg0A8kkIi9lVRVvxjoUynHb2ZjsWUjXXjoXSP8LCxPlWiCYmkpk1KBTT3qCxYjExYLb6HINy22bPgjjHik95dIm2jIaRQT8IC4BbYQmL53Uz5y2Qy7A3e8aiV7N9f7zf2Sm/X7+Nd0fe9u9x84CksJCfsdCf7RDHVY5dBuvzhdYhLMS0qlWLj5M9O8cS0/xEwsJjs2HV0LGCtuIQgWKLm9giyS4BgBxUYfG8nn2r4jzyoLdCznlReiukPT3keKq5Tab8zisVwlshd7IuEWxLjBLaL3WYGFc79hhszhcGPWNhZCkx/4nVjM61sWIx4UznNkkBZNisVR4xVtBWXL34lKE/4o8AMB1KFH1eB2Fxxq2LL/6XN+GL47kVEn9sB94fEeuI5eJYRrWc3Ck2dNpsFzrHEk8ZVgV1tDWPPwLAdFSYuxPCIng4kX+3+jf/N10nxp/0DtW2eRHsqaCN4hnLyL63FRZOm42ZjhtLqxkvgqYnuiaNsBAAxvH1hAXApOB1AAA5VBhFERZQErwOACCHCqMowgJKgtcBAORQYRRFWEBJ8DoAgBwqjKIICygJXgcAkEOFURRhASXB6wAAcqgwiiIsoCR4HQBADhVG0Z6wAAAAAMiEHQsoBl4HAJBDhVEUYQElwesAAHKoMIoiLKAkeB0AQA4VRlGEBZQErwMAyKHCKIqwgJLgdQAAOVQYRREWUBK8DgAghwqjKMICSoLXAQDkUGEURVhASfA6AIAcKoyiCAsoie11TdM4C43yuI5ds+kgFgYkB7WNybR5UCeeck9NsVV3QW6yPgDgocLcXU5YvG2fFqvXt1nHdFGtYd8Rw+u0hBqkrlbK+nafbZQmk22DhmI/QxmqCTSZNWjiyVPGgrepLyWugLAAmBotih42y05sWM+Z4BEWEdUa9h3RvE68Po6zmlGtNbcZtDRsCAt/Jx6MDO23WVsK51hGZbvcNjv+CADToUTRw2Z5FROHzbJZbg4zmpQSFm/bp8X9bnG3W9w9bY+GHV5Xp5Ldavt5rdbJx5ePx4Ptw6n+4u5l3++h08nndnUuPHfVa/7wLtgWnhU66c/iarNQWTYMJkL0OjFvtcrV8KB8n5nItU6G4hQEdoVBqsI5VlxHXBDn+qAqAGbAtSlw2Cxn3LRICov9y+L+ZX8+fty3bfv+eL97PBVdjy1hca3f7h9OCiDaGPjcrvoy5VKt0zwgOit30u5frmMdXlcdCSKPyI7FTBg7FnH2EuVFt0lw0EpX0mId+3iE+DCIbTByuVZfXArPmoiLIzaJTbLNFntAWwBMjUtYPK9r2rHYP4RX7YKAkPJxsGORLO/l/rZtD68rsVofZyc9eZQ3ItyU0bdCtAvoIFOKbeP+BymG0clSs601M7edyG11khyrjdYznn63gmaYjWEYAGSSFhaHzXLehywSwqJ3TX8kU0BYwqJzD+Jy00Ro3rkv4+ykPe6U3PVv6PhGhCmZ4hkLsZ9u2zjVeTq0U+ag5GoY7LS5jTL9uLHEaTqNMQZyTg0A8kkIi9lVRVvxjoUyXOKs0oncZNSIcFNuIiyc+V7sQWwuZmgxtQ+esKN50uZ4jp4+nWZ4dImxjNrHoB+EBcCtsITF87qZ8xbIZdibPWPRv93w/ni/s4VFdHsi3B1527/HzQPsBzUunbT7l2vhVU+olYX7JjAJtrAQM6iRbj0j2rnNn4D9I/o7TNbUcrm9T+A5ZQ8RKK24iS2S7BIAyEEVFs/r2bcqziMPeivknG6lt0La3u2Gl21qx6L7RobwVsidrEsE28KzQicnodO/OaJXjg2DifDsWLSKgOiKj+RmgyFKtB40G2512W03t23WKo8YK2hr6CejWrBo2hoCwM1RoujzOoxn821d8Jc3oSSZwiKZEbt1gspizrMTsHYwDs2AQTY7k7dnXkmrgjralxJ/BIDpqDB3J4RF8GzjD/w3/1fyo7D/8mZ84Rtcx8fVtAtlrURr3u3HU2cEyYYem281llYzWPxW1xPaijnHBYBxfD1hATApeB0AQA4VRlGEBZQErwMAyKHCKIqwgJLgdQAAOVQYRREWUBK8DgAghwqjKMICSoLXAQDkUGEURVhASfA6AIAcKoyiCAsoCV4HAJBDhVG0JywAAAAAMmHHAoqB1wEA5FBhFD0Ki/8DtYVLCdJrMhgAAAAASUVORK5CYII=" alt="" />
详细解释:
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>
效果:
aaarticlea/png;base64,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" alt="" />
具体的小伙伴们可以敲敲代码试试，自然就懂了其中的逻辑的。说其逻辑还真不知道怎么说。具体的可以看看：
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>