之前使用純 CSS 實現了一個樹形結構，效果如下：

還有一點，樹形結構是逐層縮進的，是使用內邊距實現的，但是這樣會有點擊范圍的問題，「層級越深，點擊范圍越小」，如下。

之前的方案是用絕對定位實現的，比較巧妙，但也有點難以理解，不過現在發現了另一種方式也能很好的實現縮進效果，一起看看吧

一、counter() 與 counters()

我們平時使用的一般都是counter，也就是計數器，比如：

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

加上計數器，通常用偽元素來顯示這個計數器。

ul {
  counter-reset: listCounter; /*初始化計數器*/
}
li {
  counter-increment: listCounter; /*計數器增長*/
}
li::before {
  content: counter(listCounter); /*計數器顯示*/
}

這就是一個最簡單的計數器了，效果如下：

我們還可以改變計數器的形態，比如改成大寫羅馬數字（upper-roman）。

li::before {
  content: counter(listCounter, upper-roman);
}

效果如下：

有關計數器，網上的教程非常多，大家可以自行搜索

然后我們再來看counters()，比前面的counter()多了一個s，叫做「嵌套計數器」，有什么區別呢？下面來看一個例子，還是和上面一樣，只是結構上復雜一些、

<ul>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li></li>
  <li></li>
  <li>
    <ul>
      <li></li>
      <li>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

效果如下：

看著好像也不錯？但是好像從計數器上看不出層級效果，我們把counter()換成counters()，注意，counters()要多一個參數，表示連接字符，也就是嵌套時的分隔符，如下：

li::before {
  content: counters(listCounter, '-');
}

效果如下：

是不是可以非常清楚的看出每個列表的層級？下次碰到類似的需求就不需要用 JS 去遞歸生成了，直接用 CSS 渲染，簡單高效，也不會出錯。

默認ul是有padding的，我們把這個去除看看，變成了這樣。

嗯，看著這些「長短不一」的序號，是不是剛好可以實現樹形結構的縮進呢？

二、樹形結構的逐層縮進

回到文章開頭，我們先去除之前的padding-left，會變成這樣。

完全看不清結構關系，現在我們加上嵌套計數器。

.tree details{
    counter-reset: count;
}
.tree summary{
    counter-increment: count;
}
.tree summary::before{
    content: counters(count,"-");
    color: red;
}

由于結構關系，目前序號都是1，沒關系，只需要有嵌套關系就行，效果如下：

是不是剛好把每個標題都擠過去了？ 然后我們把中間的連接線去除，這樣可以更方便的控制縮進的寬度。

.tree summary::before{
    content: counters(count,"");
    color: red;
}

效果如下：

最后，我們只需要設置這個計數器的顏色為透明就行了。

.tree summary::before{
    content: counters(count,"");
    color: transparent;
}

最終效果如下：

這樣做的好處是，每個樹形節點都是完整的寬度，所以 可以很輕易的實現hover效果，而無需借助偽元素去擴大點擊范圍。

.tree summary:hover{
    background-color: #EEF2FF;
}

效果如下：

還可以通過修改計數器的字號來調整縮進，完整代碼可以訪問以下鏈接：

• CSS tree counters (juejin.cn)[1]
• CSS tree counters (codepen.io)[2]

三、總結一下

以上就是本文的全部內容了，主要介紹了計數器的兩種形態，以及想到的一個應用場景，下面總結一下

• 逐層縮進用內邊距比較容易實現，但是會造成子元素點擊區域過小的問題。
• counter 表示計數器，比較常規的單層計數器，形如 1、2、3。
• counters 表示嵌套計數器，在有層級嵌套時，會自動和上一層的計數器相疊加，形如1、1-1、1-2、1-2-1。
• 嵌套計數器會逐層疊加，計數器的字符會逐層增加，計數器所占據的位置也會越來越大。
• 嵌套計數器所占據的空間剛好可以用作樹形結構的縮進，將計數器的顏色設置為透明就可以了。
• 用計數器的好處是，每個樹形節點都是完整的寬度，而無需借助偽元素去擴大點擊范圍。

一個還算實用的小技巧，你學到了嗎？

[1]CSS tree counters (juejin.cn)： https://code.juejin.cn/pen/7315323581772005414。

[2]CSS tree counters (codepen.io)： https://codepen.io/xboxyan/pen/jOJOBdr。