建站
咨詢
售后
建站咨詢
新聞中心
之前使用純 CSS 實(shí)現(xiàn)了一個(gè)樹形結(jié)構(gòu)，效果如下：
還有一點(diǎn)，樹形結(jié)構(gòu)是逐層縮進(jìn)的，是使用內(nèi)邊距實(shí)現(xiàn)的，但是這樣會(huì)有點(diǎn)擊范圍的問題，「層級越深，點(diǎn)擊范圍越小」，如下。
之前的方案是用絕對定位實(shí)現(xiàn)的，比較巧妙，但也有點(diǎn)難以理解，不過現(xiàn)在發(fā)現(xiàn)了另一種方式也能很好的實(shí)現(xiàn)縮進(jìn)效果，一起看看吧
一、counter() 與 counters()
我們平時(shí)使用的一般都是counter，也就是計(jì)數(shù)器，比如：
加上計(jì)數(shù)器，通常用偽元素來顯示這個(gè)計(jì)數(shù)器。
ul {
counter-reset: listCounter; /*初始化計(jì)數(shù)器*/
}
li {
counter-increment: listCounter; /*計(jì)數(shù)器增長*/
}
li::before {
content: counter(listCounter); /*計(jì)數(shù)器顯示*/
}這就是一個(gè)最簡單的計(jì)數(shù)器了，效果如下：
我們還可以改變計(jì)數(shù)器的形態(tài)，比如改成大寫羅馬數(shù)字（upper-roman）。
li::before {
content: counter(listCounter, upper-roman);
}效果如下：
有關(guān)計(jì)數(shù)器，網(wǎng)上的教程非常多，大家可以自行搜索
然后我們再來看counters()，比前面的counter()多了一個(gè)s，叫做「嵌套計(jì)數(shù)器」，有什么區(qū)別呢？下面來看一個(gè)例子，還是和上面一樣，只是結(jié)構(gòu)上復(fù)雜一些、
-
-
-
效果如下：
看著好像也不錯(cuò)？但是好像從計(jì)數(shù)器上看不出層級效果，我們把counter()換成counters()，注意，counters()要多一個(gè)參數(shù)，表示連接字符，也就是嵌套時(shí)的分隔符，如下：
li::before {
content: counters(listCounter, '-');
}效果如下：
是不是可以非常清楚的看出每個(gè)列表的層級？下次碰到類似的需求就不需要用 JS 去遞歸生成了，直接用 CSS 渲染，簡單高效，也不會(huì)出錯(cuò)。
默認(rèn)ul是有padding的，我們把這個(gè)去除看看，變成了這樣。
嗯，看著這些「長短不一」的序號，是不是剛好可以實(shí)現(xiàn)樹形結(jié)構(gòu)的縮進(jìn)呢？
二、樹形結(jié)構(gòu)的逐層縮進(jìn)
回到文章開頭，我們先去除之前的padding-left，會(huì)變成這樣。
完全看不清結(jié)構(gòu)關(guān)系，現(xiàn)在我們加上嵌套計(jì)數(shù)器。
.tree details{
counter-reset: count;
}
.tree summary{
counter-increment: count;
}
.tree summary::before{
content: counters(count,"-");
color: red;
}由于結(jié)構(gòu)關(guān)系，目前序號都是1，沒關(guān)系，只需要有嵌套關(guān)系就行，效果如下：
是不是剛好把每個(gè)標(biāo)題都擠過去了？ 然后我們把中間的連接線去除，這樣可以更方便的控制縮進(jìn)的寬度。
.tree summary::before{
content: counters(count,"");
color: red;
}效果如下：
最后，我們只需要設(shè)置這個(gè)計(jì)數(shù)器的顏色為透明就行了。
.tree summary::before{
content: counters(count,"");
color: transparent;
}最終效果如下：
這樣做的好處是，每個(gè)樹形節(jié)點(diǎn)都是完整的寬度，所以 可以很輕易的實(shí)現(xiàn)hover效果，而無需借助偽元素去擴(kuò)大點(diǎn)擊范圍。
.tree summary:hover{
background-color: #EEF2FF;
}效果如下：
還可以通過修改計(jì)數(shù)器的字號來調(diào)整縮進(jìn)，完整代碼可以訪問以下鏈接：
- CSS tree counters (juejin.cn)[1]
- CSS tree counters (codepen.io)[2]
三、總結(jié)一下
以上就是本文的全部內(nèi)容了，主要介紹了計(jì)數(shù)器的兩種形態(tài)，以及想到的一個(gè)應(yīng)用場景，下面總結(jié)一下
- 逐層縮進(jìn)用內(nèi)邊距比較容易實(shí)現(xiàn)，但是會(huì)造成子元素點(diǎn)擊區(qū)域過小的問題。
- counter 表示計(jì)數(shù)器，比較常規(guī)的單層計(jì)數(shù)器，形如 1、2、3。
- counters 表示嵌套計(jì)數(shù)器，在有層級嵌套時(shí)，會(huì)自動(dòng)和上一層的計(jì)數(shù)器相疊加，形如1、1-1、1-2、1-2-1。
- 嵌套計(jì)數(shù)器會(huì)逐層疊加，計(jì)數(shù)器的字符會(huì)逐層增加，計(jì)數(shù)器所占據(jù)的位置也會(huì)越來越大。
- 嵌套計(jì)數(shù)器所占據(jù)的空間剛好可以用作樹形結(jié)構(gòu)的縮進(jìn)，將計(jì)數(shù)器的顏色設(shè)置為透明就可以了。
- 用計(jì)數(shù)器的好處是，每個(gè)樹形節(jié)點(diǎn)都是完整的寬度，而無需借助偽元素去擴(kuò)大點(diǎn)擊范圍。
一個(gè)還算實(shí)用的小技巧，你學(xué)到了嗎？
[1]CSS tree counters (juejin.cn)： https://code.juejin.cn/pen/7315323581772005414。
[2]CSS tree counters (codepen.io)： https://codepen.io/xboxyan/pen/jOJOBdr。
網(wǎng)站名稱：妙用CSScounters實(shí)現(xiàn)逐層縮進(jìn)
分享路徑：http://www.5511xx.com/article/cciissg.html
