排行榜妙用——CSS计数器

碰到的坑

小伙伴你们是否有碰到以下的情况，排行榜前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;

//定义多个计数器，并设置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-child{background:#090}

 

posted @ 2016-04-28 11:23  羯瑞  阅读(1332)  评论(3)  编辑  收藏  举报