帶你瞭解css計數器——counters

第一次瞭解到這個css是由於代碼高亮-prismj中行號顯示的實現。

當時很好奇前面的行號是如何實現的，一探究竟原來很是簡單。

話很少說，先看代碼。

一段css代碼通過替換後的HTML：

<pre class="line-numbers language-css" data-src="plugins/line-numbers/prism-line-numbers.css"><code class=" language-css"><span class="token selector">pre.line-numbers</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">padding-left</span><span class="token punctuation">:</span> 3.8em<span class="token punctuation">;</span>
    <span class="token property">counter-reset</span><span class="token punctuation">:</span> linenumber<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></code></pre>

生成的html無非就是把不一樣的關鍵字用不一樣的span括起來，加上不一樣的樣式，從而顯示出不一樣的顏色，達到代碼高亮的效果。咱們重點關注其行號是如何實現的，相關css代碼以下：

pre.line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}
.line-numbers .line-numbers-rows {
  font-size: 100%;
  position: absolute;
  top: 0;
  left: -3.8em;
  width: 3em;
  user-select: none;
  letter-spacing: -1px;
  pointer-events: none;
  border-right: 1px solid #999;
}
.line-numbers-rows>span {
  display: block;
  counter-increment: linenumber;
}
.line-numbers-rows>span:before {
  display: block;
  padding-right: .8em;
  content: counter(linenumber);
  text-align: right;
  color: #999;
}

就能顯示爲如上所示的結構，css代碼看起來多，實則否則，核心部分就三句：

• 遇到 line-numbers 時 counter-reset: linenumber; 做用是重置名稱爲linenumber的計數器。
• 遇到 .line-numbers-rows>span 時 counter-increment: linenumber; 做用是此時名稱爲linenumber的計數器進行遞增。
• 在 line-numbers-rows>span 中建立一個僞元素，設置其content 爲 counter(linenumber) ，也就是在這個僞元素中顯示這個計數器

codepen 實例

既然不知道，就仍是來學習一下，一查才知道，這東西已經出現不少年了，不是什麼新鮮玩意。 仍是本身無知呀，學無止境。

css-counter的幾個關鍵屬性正好就是上面實現行號所用到的三部曲。

• counter-reset ：必需值，必須用於選擇器，主要用來標識該做用域，其值能夠自定義。值語法爲 counter-reset: identifier [integer ] ，其中的 identifier 即爲計數器的名稱，第二值 integer 爲計數器的初始值，默認爲0，可接受任意整數值，默認爲0，可省略。另外還能夠一次定義多個,如 counter-reset: counter1 -10 counter1 10。
• counter-increment ： 做用是遇到這個選擇器匹配的元素時，計數器進行遞增。語法格式爲 counter-increment:identifier [integer]，identifier 爲計時器名稱，integer爲一個整數值，表示每次遞增的值（負數則爲遞減），默認爲1，可省略。
• counter()/counters() : 這個實際是個方法，可理解爲獲取計數器的值。一般將其做爲僞元素的 content 屬性，從而將值顯示出來。語法格式 counter(name, style) / counters(name, string) ，counter 中的 style 是ul和ol中li元素所支持的list-style-type 的值，也就是你能夠將 1 顯示爲羅馬數字 i ；counters 則是表示可使用指定的字符串將 計數器鏈接起來。

咱們實現一個最簡單的例子吧，給ul列表加上序號。

<ul>
  <li class="item">列表條目1</li>
  <li class="item">列表條目2</li>
  <li class="item">列表條目3</li>
  <li class="item">列表條目4</li>
  <li class="item">列表條目5</li>
</ul>

<style>
  ul {
    /* 計數器 */
    counter-reset: itemcounter;
    list-style: none;
  }
  .item {
    /* 每一個item遞增 */
    counter-increment: itemcounter ;
  }
  .item:before {
    /* 顯示計數器 還能夠拼接個頓號 */
    content: counter(itemcounter) '、';
  }
  .item:after {
    /* 試試轉化爲小寫羅馬數字 再顯示到後面*/
    content: '\'s index is '  counter(itemcounter,lower-roman);
  }
</style>

效果如圖：

挺簡單嘛，論文或者各類文檔中須要將標題標爲1-一、1-1-1的形式是否是也能夠用這個作呢，咱們一塊兒來試試。

<ul class="list-1">
  <li class="level-1">
    <span>一級標題1</span>
    <ul class="list-2">
      <li class="level-2">
        <span>二級標題1</span>
      </li>
      <li class="level-2">
        <span>二級標題2</span>
      </li>
    </ul>
  </li>
  <li class="level-1">
    <span>一級標題2</span>
  </li>
  <li class="level-1">
    <span>一級標題3</span>
    <ul class="list-2">
      <li class="level-2">
        <span>二級標題1</span>
      </li>
      <li class="level-2">
        <span>二級標題2</span>
      </li>
    </ul>
  </li>
</ul>

<style>
  .list-1 {
    counter-reset: counter1;
    list-style: none;
  }
  .list-2 {
    counter-reset: counter2;
    list-style: none;
  }
  .level-1 {
    counter-increment: counter1;
  }
  .level-2 {
    counter-increment: counter2;
  }
  .level-1:before {
    content: counter(counter1) '、';
  }
  .level-2::before {
    content: counter(counter1) '-' counter(counter2) '、';
  }
</style>

效果果如圖：

能實現，可是略顯麻煩對不對。對於這種須要嵌套的使用 counters 就會變得方便不少。

<div class="reset">
    <div class="item">一級標題1
        <div class="reset">
            <div class="item">二級標題1</div>
            <div class="item">二級標題2
                <div class="reset">
                    <div class="item">三級標題1</div>
                    <div class="item">三級標題2</div>
                    <div class="item">三級標題3</div>
                </div>
            </div>
            <div class="item">二級標題3</div>
        </div>
    </div>
    <div class="item">一級標題2</div>
    <div class="item">一級標題3
        <div class="reset">
            <div class="item">二級標題1</div>
        </div>
    </div>
</div>

<style>
.reset {
    line-height: 1.6;
    padding-left: 20px;
    counter-reset: itemcounter;
    color: #666;
} 
.item:before {
    content: counters(itemcounter,
    "-") "、";
    counter-increment: itemcounter;
}
</style>

效果：

同樣的效果代碼是否是簡單了很多呢？