歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋(píng)果6袋
6
麥子學(xué)院

css學(xué)習(xí)之 counter屬性詳解

發(fā)布時(shí)間:2018-04-29 23:30  回復(fù):0  查看:2674   最后回復(fù):2018-04-29 23:30  
學(xué)習(xí)css  ,counter屬性不得不了解清楚,css counter屬性被幾乎所有瀏覽器(包括IE8)支持, 但是卻不常使用。本文和大家分享的就是counter屬性相關(guān)內(nèi)容,雖然這個(gè)屬性不常用,但是希望大家需要用的時(shí)候,本文對(duì)大家有所幫助。
  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 itsection {
  counter-reset: unicornCounter;
  }
  // specify the child element being countedsection h1 {
  counter-increment: unicornCounter;
  }
  在上面的代碼里 section的每一個(gè)h1元素 將會(huì)被設(shè)置counted值1
  css語(yǔ)法規(guī)則
  COUNTER-RESET 和 COUNTER-INCREMENT 的語(yǔ)法類似
  第一位 表示具體counter標(biāo)識(shí)
  可以是a-z 0-9 _ - 組合的單詞 但不能是關(guān)鍵字none, unset, initial, or inherit


來(lái)源:網(wǎng)絡(luò)
您還未登錄,請(qǐng)先登錄

熱門(mén)帖子

最新帖子

?