CSS計數器是什么-創(chuàng)新互聯(lián)

CSS計數器是什么？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純热荩屛覀円黄饋砜纯窗桑?/p>

網站設計制作過程拒絕使用模板建站；使用PHP+MYSQL原生開發(fā)可交付網站源代碼;符合網站優(yōu)化排名的后臺管理系統(tǒng)；網站設計、成都網站建設收費合理；免費進行網站備案等企業(yè)網站建設一條龍服務.我們是一家持續(xù)穩(wěn)定運營了10多年的創(chuàng)新互聯(lián)公司網站建設公司。

css計數器效果是指使用CSS代碼實現(xiàn)隨元素的數目增多, 數值也跟著變大的效果, 有點類似于<ol>, 但是比ol更靈活。

CSS計數器有兩個屬性 (counter-reset 和 counter-increment) 和一個方法 (counter() / counters()), 下面以次講解:

1. counter-reset

屬性counter-reset顧名思義就是計數器-重置的意思, 其實主要作用就是給計數器起個名字, 如果可能, 順便告訴下從哪個數字開始計數, 默認是0, 注意默認是0, 而不是1, 在網上可能會看到有很多例子默認顯示的第一個數字都是1, 而不是0, 這是因為受到 counter-increment 的影響, 后面詳細講解

先看一個簡單的例子

<div>下面將出現(xiàn)的數字</div>
<div class="counter"></div>

.counter {
    counter-reset: resetname 2;
    font-size: 24px;
    color: #f66;
}
.counter:before {
    content: counter(resetname);
}

CSS計數器是什么

如果將conter-reset 后面的2去掉, 那下面出現(xiàn)的數字就是 0

counter-reset 的計數重置可以是復數, 如 -2, 也可以是小數, 如 2.99, 不過, IE和FireFox對此都不認識, 認為是不合法的數值, 會當做0來處理, 在Chrome下, 任何小數都是向下取整, 如 2.99 會當成 2 來處理.

你以為到此為止了? 當然不是! counter-reset還有一手, 就是多個計數器同時命名, 列如:

    .counter {
        counter-reset: first 2 second 3;
        font-size: 24px;
        color: #f66;
    }
    .counter:before {
        content: counter(first);
    }
    .counter:after {
        content: counter(second);
    }

CSS計數器是什么

另外, counter-reset 還可以設置為 none, 和inherit, 取消重置以及繼承重置.

2. counter-increment

屬性 counter-increment 顧名思義就是計數器遞增的意思, 值為counter-reset的一個或者多個關鍵字, 后面可以跟數字, 表示每次計數的變化值, 如果省略則使用默認變化值 1

CSS計數器的技術有一套自己的規(guī)則, 我們稱之為 "普照規(guī)則", 具體來講就是, 普照源 (counter-reset) 唯一, 每普照(counter-increment)一次, 普照源增加一次計數

于是就能解決上面所說的 "默認值0"的問題了, 通常我們在使用計數器的時候, 都會使用counter-increment , 這個肯定要用, 不然怎么遞增呢.

.counter {
    counter-reset: incerment 2;
    counter-increment: incerment;
    font-size: 24px;
    color: #f66;
}
.counter:before {
    content: counter(incerment);
}

CSS計數器是什么

這個普照元素也可以寫直接寫到為元素上, 效果和上面一樣, 也是遞增1, 如果父元素和子元素都寫了, 那么父元素遞增一次, 子元素遞增一次, 最后的結果就是遞增兩次

正如之前提到的, 這個變化值不一定都是1, 可以靈活設置, 比如

counter-increment: incerment 2;

變化值也可以是負數, 比如：

.counter {
    counter-reset: incerment 5;
    counter-increment: incerment -2;
    font-size: 24px;
    color: #f66;
}
.counter:before {
    content: counter(incerment);
}

CSS計數器是什么

值也可以是none 和 inherit

3. counter()/counters()

這兩個是方法, 不是屬性, 類似于CSS3中的 calc(), 這里的作用就是顯示計數, 不過名稱和用法有多個

比如上面用到的 counter(name), 就是顯示計數

還可以寫成 counter(name, style)

那么這個style是什么呢, 它支持的關鍵字就是 list-style-type 所支持的那些, 它的作用就是我們的遞增和遞減不一定都是數字, 也可以使英文字母或者別的

list-style-type:

.counter {
    counter-reset: styleType 2;
    font-size: 24px;
    color: #f66;
}
.counter:before {
    counter-increment: styleType;
    content: counter(styleType, lower-roman);
}

CSS計數器是什么

counter 還支持級聯(lián), 也就是說, 一個content 屬性可以有多個 counter() 方法

.counter {
    counter-reset: cascaderOne 2 cascaderTwo 3;
    font-size: 24px;
    color: #f66;
}
.counter:before {
    content: counter(cascaderOne) '\A' counter(cascaderTwo);
    white-space: pre;
}

CSS計數器是什么

下面介紹一下 counters() 方法, 看似只比counter多個 s , 但卻有著不同的意思, counters 幾乎可以說是嵌套計數器的代名詞.

我們平時寫的時候不可能都是1, 2, 3, ..., 還有比如 1.1, 1.2, 1.3...等類似的序號, 前者就是counter()干的事, 后者就是counters()干的事

counters的基本用法

counters(name, string, style);

其中 string 參數是字符串, 需要用引號包含, 是必須參數, 表示子序號的連接符, style還是和counter的第二個參數一樣

下面一個完整的demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>content</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul, li {
            list-style: none;
        }
        .reset { 
            padding-left: 20px; 
            counter-reset: fe;
        }
        .counter:before { 
            content: counters(fe, '.') '. '; 
            counter-increment: fe;
        }
    </style>
</head>
<body>
<div class="reset">
    <div class="counter">前端開發(fā)FE
        <div class="reset">
            <div class="counter">前端開發(fā)FE111</div>
            <div class="counter">前端開發(fā)FE222
                <div class="reset">
                    <div class="counter">前端開發(fā)FEsss</div>
                    <div class="counter">前端開發(fā)FE</div>
                    <div class="counter">前端開發(fā)FE</div>
                </div>
            </div>
            <div class="counter">前端開發(fā)FE3333</div>
        </div>
    </div>
    <div class="counter">后端開發(fā)</div>
    <div class="counter">PM
        <div class="reset">
            <div class="counter">瞎提需求</div>
        </div>
    </div>
</div>
</body>
</html>

CSS計數器是什么

感謝各位的閱讀！看完上述內容，你們對CSS計數器是什么大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注創(chuàng)新互聯(lián)-成都網站建設公司行業(yè)資訊頻道。

分享名稱：CSS計數器是什么-創(chuàng)新互聯(lián)
分享路徑：http://aaarwkj.com/article4/isjie.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站制作、云服務器、響應式網站、動態(tài)網站、ChatGPT、品牌網站制作

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

CSS計數器是什么-創(chuàng)新互聯(lián)