css counter屬性被幾乎所有瀏覽器（包括IE8）支持， 但是卻不常使用， 這篇文章就帶大家學習了解下這些屬性
COUNTER-RESET
明譯為計數器重置。形如： counter-reset: counter-name
常見寫法為
/* Set counter-name to 0 */counter-reset: counter-name;/* Set counter-name to -1 */counter-reset: counter-name -1;/* Set counter1 to 1, and counter2 to 4 */counter-reset: counter1 1 counter2 4;
用于在某個元素上重置counter
COUNTER-INCREMENT
couter-increment 明譯為計數器重置
常用寫法為
/* Increment counter-name by 1 */counter-increment: counter-name;/* Decrement counter-name by 1 */counter-increment: counter-name -1;/* Increment counter1 by 1, and decrement counter2 by 4 */counter-increment: counter 1 counter2 -4;
在使用 counter-increment 之前 我們必須先使用 counter-reset 在其父元素初始化一個counter
例如：
// parent element has a counter-reset// applied to instantiate itsection { counter-reset: unicornCounter;}// specify the child element being countedsection h1 { counter-increment: unicornCounter;}在上面的代碼里 section的每一個h1元素 將會被設置counted值1
css語法規則
COUNTER-RESET 和 COUNTER-INCREMENT 的語法類似
第一位 <custom-ident> 表示具體counter標識
可以是a-z 0-9 _ - 組合的單詞 但不能是關鍵字none, unset, initial, or inherit
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
