css-counter屬性

前言

博客原文查看可點擊《CSS counter屬性》哦！ 本文引用張鑫旭大大博客文章《CSS counter計數器(content目錄序號自動遞增)詳解》，一直以爲鑫大大是個被程序員耽誤的小說家，他的文章風格大都以淺明深，詼諧幽默，可點擊這裏查看原文哦。

好了，It's my show time!
在瞭解到counter以前，想到計數應該屬ul，ol標籤元素了吧，但它們的遞增規則單一，沒法實現自定義的遞增。而counter屬性完美的解決了這個問題，讓咱們一塊兒來看看吧。
首先，使用一個屬性前，咱們必定得了解一下它的兼容性，曾經被IE兼容性虐哭的我，不得不當心做爲一個好用屬性的兼容問題。

兼容性

I E	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
8.0+	2.0+	4.0+	3.1+	3.5+	3.2+	2.1+	18.0+

  看到這裏是否是內心放鬆了不少，它的兼容性仍是能夠的接受的，範圍不算侷限。

counter的使用題要

CSS計數器只能跟content屬性在一塊兒的時候纔有做用，而content屬性貌似專門用在before/after僞元素上的。因而，就有了，「計數器↔僞元素↔content屬性」的鐵三角關係

counter成員

counter的成員主要有三個：

• counter-reset（計數器聲明及初始值設置）
• counter-increment（遞增規則）
• counter()/counters(計算結果生成)

counter-reset

counter-reset主要有三個屬性。

• none：默認。不能對選擇器的計數器進行重置。
• name num：name即標記計數器名稱，num即記錄計數器初始值。num非必寫，默認爲0。
• inherit：規定應該從父元素繼承 counter-reset 屬性的值。

counter-increment

counter-increment主要有三個屬性。

• none：沒有計數器將遞增。
• name num：name即選擇遞增的計數器，num即增量。num非必寫，默認爲1，能夠是正數、零或者負數。
• inherit：指定counter-increment屬性的值，應該從父元素繼承。

counter()/counters()

這是個方法，不是屬性。相似CSS3中才calc()計算。

• name：選擇遞增的計數器。
• style：遞增的數字樣式：阿拉伯數字，羅馬數字等，具體以下：

list-style-type：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

• string：counters的屬性，子序數鏈接符

注：多個計數器還可同時命名，接下來咱們上代碼看幾個例子。

CSS：
1. counter-reset屬性
.xxx { 
  counter-reset: count; /* 計數器名稱是'count', 而且默認起始值爲0 */
} 

.xxx { 
  counter-reset: count 4; /* 計數器名稱是'count', 而且默認起始值爲4 */
} 

.xxx { 
  counter-reset: count1 2 count2 3; /* 定義兩個計數器'count1'和'count2',默認起始值分別爲2和3 */
} 

2. counter-increment屬性
.counter { 
  counter-increment: count 2; /*'count'以2階段遞增 */
}

.counter { 
  counter-increment: count -1;  /*'count'以1階段遞減 */
}

3. counter方法
counters(name, style);

.counter:before { 
  content: counter(count1) '\A' counter(count2);  /*'\A'使用inline水平元素換行*/
  white-space: pre; 
}
複製代碼

  接下來看一個完整的例子。
效果如圖：

<div class="box">
	<div class="list">一級標題
    <div class="box">
      <div class="list">二級標題</div>
      <div class="list">二級標題</div>
      <div class="list">二級標題</div>
    </div>
    <div class="box">
      <div class="list">二級標題
        <div class="box">
          <div class="list">三級標題</div>
          <div class="list">三級標題</div>
          <div class="list">三級標題</div>
        </div>
      </div>
    </div>
    <div class="box"></div>	
    </div>
  <div>
  <div class="list">一級標題<div>
</div>

<style> .box { counter-reset: counter; } .toper, .inner { background-color: #eee; margin-left: 20px; } .list:before, .toper:before, .inner:before { counter-increment: counter; } .list { padding-left: 20px; } .inner:before, .list:before, .toper:before { content: counters(counter,'.')'、'; } </style>
複製代碼

OK~至此，關於counter的介紹就差很少結束了，能夠在實踐過程當中發現和挖掘更有意思的操做，若是你有什麼有趣的神操做，能夠給我留言分享哦！啦啦啦~