CSS計數(shù)器是什么？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！
css計數(shù)器效果是指使用CSS代碼實現(xiàn)隨元素的數(shù)目增多, 數(shù)值也跟著變大的效果, 有點類似于
CSS計數(shù)器有兩個屬性 (counter-reset 和 counter-increment) 和一個方法 (counter() / counters()), 下面以次講解:
1. counter-reset
屬性counter-reset顧名思義就是 計數(shù)器-重置 的意思, 其實主要作用就是給計數(shù)器起個名字, 如果可能, 順便告訴下從哪個數(shù)字開始計數(shù), 默認是0, 注意默認是0, 而不是1, 在網(wǎng)上可能會看到有很多例子默認顯示的第一個數(shù)字都是1, 而不是0, 這是因為受到 counter-increment 的影響, 后面詳細講解
先看一個簡單的例子
下面將出現(xiàn)的數(shù)字
重慶分公司
重慶分公司
.counter {
counter-reset: resetname 2;
font-size: 24px;
color: #f66;
}
.counter:before {
content: counter(resetname);
}
如果將conter-reset 后面的2去掉, 那下面出現(xiàn)的數(shù)字就是 0
counter-reset 的計數(shù)重置可以是復(fù)數(shù), 如 -2, 也可以是小數(shù), 如 2.99, 不過, IE和FireFox對此都不認識, 認為是不合法的數(shù)值, 會當做0來處理, 在Chrome下, 任何小數(shù)都是向下取整, 如 2.99 會當成 2 來處理.
你以為到此為止了? 當然不是! counter-reset還有一手, 就是多個計數(shù)器同時命名, 列如:
.counter {
counter-reset: first 2 second 3;
font-size: 24px;
color: #f66;
}
.counter:before {
content: counter(first);
}
.counter:after {
content: counter(second);
}
另外, counter-reset 還可以設(shè)置為 none, 和inherit, 取消重置以及繼承重置.
2. counter-increment
屬性 counter-increment 顧名思義就是 計數(shù)器遞增的意思, 值為counter-reset的一個或者多個關(guān)鍵字, 后面可以跟數(shù)字, 表示每次計數(shù)的變化值, 如果省略則使用默認變化值 1
CSS計數(shù)器的技術(shù)有一套自己的規(guī)則, 我們稱之為 "普照規(guī)則", 具體來講就是, 普照源 (counter-reset) 唯一, 每普照(counter-increment)一次, 普照源增加一次計數(shù)
于是就能解決上面所說的 "默認值0"的問題了, 通常我們在使用計數(shù)器的時候, 都會使用counter-increment , 這個肯定要用, 不然怎么遞增呢.
.counter {
counter-reset: incerment 2;
counter-increment: incerment;
font-size: 24px;
color: #f66;
}
.counter:before {
content: counter(incerment);
}
這個普照元素也可以寫直接寫到為元素上, 效果和上面一樣, 也是遞增1, 如果父元素和子元素都寫了, 那么父元素遞增一次, 子元素遞增一次, 最后的結(jié)果就是遞增兩次
正如之前提到的, 這個變化值不一定都是1, 可以靈活設(shè)置, 比如
counter-increment: incerment 2;
變化值也可以是負數(shù), 比如：
.counter {
counter-reset: incerment 5;
counter-increment: incerment -2;
font-size: 24px;
color: #f66;
}
.counter:before {
content: counter(incerment);
}
值也可以是none 和 inherit
3. counter()/counters()
這兩個是方法, 不是屬性, 類似于CSS3中的 calc(), 這里的作用就是顯示計數(shù), 不過名稱和用法有多個
比如上面用到的 counter(name), 就是顯示計數(shù)
還可以寫成 counter(name, style)
那么這個style是什么呢, 它支持的關(guān)鍵字就是 list-style-type 所支持的那些, 它的作用就是我們的遞增和遞減不一定都是數(shù)字, 也可以使英文字母或者別的
list-style-type:
disc | circle | square | decimal | decimal-leading-zero |
lower-roman | upper-roman | lower-greek | lower-latin | upper-latin |
armenian | georgian | none | inherit
.counter {
counter-reset: styleType 2;
font-size: 24px;
color: #f66;
}
.counter:before {
counter-increment: styleType;
content: counter(styleType, lower-roman);
}
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;
}
下面介紹一下 counters() 方法, 看似只比counter多個 s , 但卻有著不同的意思, counters 幾乎可以說是嵌套計數(shù)器的代名詞.
我們平時寫的時候不可能都是1, 2, 3, ..., 還有比如 1.1, 1.2, 1.3...等類似的序號, 前者就是counter()干的事, 后者就是counters()干的事
counters的基本用法
counters(name, string, style);
其中 string 參數(shù)是字符串, 需要用引號包含, 是必須參數(shù), 表示子序號的連接符, style還是和counter的第二個參數(shù)一樣
下面一個完整的demo:
content
前端開發(fā)FE
前端開發(fā)FE111
前端開發(fā)FE222
前端開發(fā)FEsss
前端開發(fā)FE
前端開發(fā)FE
前端開發(fā)FE3333
后端開發(fā)
PM
瞎提需求
感謝各位的閱讀！看完上述內(nèi)容，你們對CSS計數(shù)器是什么大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道。
