css中counter相關(guān)屬性的示例分析

小編給大家分享一下css中counter相關(guān)屬性的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

COUNTER-RESET

明譯為計(jì)數(shù)器重置。形如： counter-reset: counter-name

常見(jiàn)寫(xiě)法為

/* 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;

用于在某個(gè)元素上重置counter

COUNTER-INCREMENT

couter-increment 明譯為計(jì)數(shù)器重置

常用寫(xiě)法為

/* 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 在其父元素初始化一個(gè)counter

例如：

// parent element has a counter-reset
// applied to instantiate it
section {
  counter-reset: unicornCounter;
}

// specify the child element being counted
section h2 {
  counter-increment: unicornCounter;
}

在上面的代碼里 section的每一個(gè)h2元素 將會(huì)被設(shè)置counted值1

css語(yǔ)法規(guī)則

COUNTER-RESET 和 COUNTER-INCREMENT 的語(yǔ)法類似

第一位 <custom-ident> 表示具體counter標(biāo)識(shí)

可以是a-z 0-9 _ - 組合的單詞 但不能是關(guān)鍵字none, unset, initial, or inherit

以上是“css中counter相關(guān)屬性的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！