[CSS] counter- 讓 css 幫你計數

來講一個有趣的 CSS 屬性，這個可以幫我們在各種 HTML 元素加上計數的功能，要使用的話首先必須要像 ul, ol 和 li 的關係一樣要有子母的元素，像這樣：

<div>
<h2>皮卡丘</h2>
<h2>小火龍</h2>
<h2>妙蛙種子</h2>
</div>

接著我們設定 CSS 如下

div{
  counter-reset:num;
}
h2::before {
  counter-increment:num; 
  content:counter(num) '. ';
}

我們就會看到如下的結果：

 其中 counter-reset 的意思是可以設定變數，後面可以帶初始值，所以如果我們要設定多個變數的話可以像這樣：

在這邊設定了 num 和 section 兩個變數，所以在計算的時候就可以依據變數以及 counter-increment 的值去決定要累加哪個數。

counter-increment 可以放第二個值設定累進值。

可以在 counter 裡設定第二個變數改變 list-style

h3::before {
  counter-increment:section; 
  content:counter(section, lower-roman) '. ';
}

 接下來我們透過 counters 來製作一個單純用 list 做不出來的計數效果：

<ol>
<li >第一層
  <ol> 
    <li>第二層
      <ol>
        <li>第三層</li>
        <li>第三層</li>
        <li >第三層</li>
      </ol>
    </li>
    <li>第二層</li>
    <li>第二層</li>
  </ol>
</li>
<li>第一層
  <ol>
    <li>第二層</li>
    <li>第二層</li>
  </ol>
</li>
</ol>

css 的部分：

ol{
  counter-reset:num;
  list-style-type: none;
}
li:before{
  content:counters(num, ".") "：";
  counter-increment:num; 
}