css中counter相關屬性的示例分析

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

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 it
section {
  counter-reset: unicornCounter;
}

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

在上面的代碼里 section的每一個h2元素 將會被設置counted值1

css語法規則

COUNTER-RESET 和 COUNTER-INCREMENT 的語法類似

第一位 <custom-ident> 表示具體counter標識

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

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