排行榜妙用——CSS計數器

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> 排行榜妙用——CSS計數器

排行榜妙用——CSS計數器

編輯：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>

效果

具體的小伙伴們可以敲敲代碼試試，自然就懂了其中的邏輯的。說其邏輯還真不知道怎麼說。具體的可以看看何問起網

兼容性

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}

CSS特效代碼

css居中方法詳解: 第一種居中方式：使用margin:auto;這應該是使用最多的居中方式了，但也有著局限性，居中的元素
內部樣式表CSS: 當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 <style&g
CSS練習-導航欄斜線分隔-利用偽元素: 開始切第一張圖了，第一個遇到的問題是頂部導航欄這裡，用斜線分割。想到的思路是用偽類:before或者

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

css樣式中rgba(0,0, 0,0)的意思讓背景圖片固定在中間，滾動內容圖片不動總結30個CSS3選擇器 a:link,a:visited,a:hover,a:active 移除行塊級元素之間的空格 DIV+CSS自適應布局 CSS 設置placeholder屬性值和樣式排行榜妙用——CSS計數器 CSS3畫圓 css ~波浪選擇器

DIV CSS 佈局教程網

碰到的坑

CSS計數器

計數器主角

兼容性

總結

彩蛋

相關文章