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

原文地址: http://www.cnblogs.com/chenrf/p/5439822.html

CSS计数器妙用的更多相关文章

  1. 排行榜妙用——CSS计数器

    碰到的坑 小伙伴你们是否有碰到以下的情况,排行榜前3名的样式不一样,你们是怎么处理的么?

  2. css计数器详解

    什么是css计数器 体验更佳排版请戳原文链接:http://blog.liuxianan.com/css-counters.html 就是采用css给一些html元素自动生成编号,比如类似1.3.2这 ...

  3. CSS计数器

    使用CSS计数器就像使用变量一样. 它有以下几个属性: counter-reset 创建或重置计数器 counter-increment 增长计数器 content 生成内容 counter() 将计 ...

  4. 转载：CSS计数器的趣味时光之css计算数据

    CSS计数器是“啊太好了,竟不知道CSS可以做这啊”这类非常有趣的众多特性之一.简言之,用CSS使你持续某增加某个量,而无需JavaScript. 简单计数器 我们从这个简单的分页示例开始: 你见到的 ...

  5. CSS计数器的趣味时光

    CSS计数器是“啊太好了,竟不知道CSS可以做这啊”这类非常有趣的众多特性之一.简言之,用CSS使你持续某增加某个量,而无需JavaScript. 简单计数器 我们从这个简单的分页示例开始: 你见到的 ...

  6. CSS计数器(序列数字字符自动递增)详解———张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4303 一.挖坟不可耻 ...

  7. css计数器 及 鼠标经过从中间扩散一个矩形（正方形长方形均可）

    <!DOCTYPE html> <html> <head> <title>css计数器--兼容IE8</title> <meta ch ...

  8. CSS计数器:counter

    最近的需求,明星字体销售排行榜中,需要对字体的销售情况进行排序. 在早期,只有ol和ul可以对子元素li进行排序:如果不使用这两个标签,就由前台开发去手动填写序号. 当然,在这个需求中,数据不是实时更 ...

  9. CSS 计数器详解

    在前端开发中总少不了列表项,对于列表项序号,射鸡师一般会列出个1,2,3...序号.在不了解css计数器属性之前,我一般会用精灵图,用类名来区分序列号图片.这样做尽管可以达到目的,但是很不方便,开发过 ...

随机推荐

  1. gulp工作流

    小屁活动使用 gulp+less gulpfile.js var gulp = require('gulp'), cssmin = require('gulp-minify-css'), less = ...

  2. SQLServer行转列

    近期面试遇到了一道面试题.顿时有点迷糊,仅仅说出了思路.后来百度了一下.整理了一下思路,于是记录下来,方便以后学习.(面试题请參见附件) 相关的数据表: 1.Score表 2.[User]表 SQL语 ...

  3. oracle列合并

    在很多场合,我们会须要用到oracle列合并,oracle提供了一些方法用于把某列的多行数据合并成一行. 一.10G曾经使用WMSYS.WM_CONCAT   wmsys.wm_concat将字段的值 ...

  4. 很好用的一个类：TJvAppXMLFileStorage

    以前写软件的时候,在处理软件配置信息的时候,总是要写很多重复的代码,把配置信息写到Ini文件当中.昨天到网上查了一下,发现JVCL中提供了一个非常好用的类TJvAppXMLFileStorage,可以 ...

  5. Webbrowser加载Flash后方向键失效问题（用到了OLE接口，没有被处理就转发，够复杂的）

    原文:http://blog.csdn.net/dropme/article/details/6253528 窗体上放一个ApplicationEvent控件,OnMessage事件中这么写 uses ...

  6. linux 查看网络负载

    netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' 前面的 netstat -n是netstat的命令,windo ...

  7. one command 一键收集 oracle 巡检信息（包括dbhc，awr reports）

    初步效果图例如以下 SQL> @nb ------Oracle Database health Check STRAT ------Starting Collect Data Informati ...

  8. POJ 3835 &amp; HDU 3268 Columbus’s bargain（最短路 Spfa）

    题目链接: POJ:http://poj.org/problem?id=3835 HDU:http://acm.hdu.edu.cn/showproblem.php?pid=3268 Problem ...

  9. 在Delphi中使用C++对象（两种方法，但都要改造C++提供的DLL）

    Delphi是市场上最好的RAD工具,但是现在C++占据着主导地位,有时针对一个问题很难找到Delphi或Pascal的解决方案.可是却可能找到了一个相关的C++类.本文描述几种在Delphi代码中使 ...

  10. 如何隐藏 QLPreviewController 的 Action 按钮？

    在 iOS 6 以前,可以在 present QLPreviewController 之后使用以下代码: [previewController.navigationItem setRightBarBu ...