MIX Fold3包裝盒泄露 新機本月登場
小米的全新折疊屏旗艦MIX Fold3將于本月發(fā)布，近日該機的真機包裝盒在網(wǎng)上泄露。從圖上來看，新的MIX Fold3包裝盒在外觀設(shè)計方面延續(xù)了之前的方案，變化不大，這也是目前小米旗艦
之前使用純 CSS 實現(xiàn)了一個樹形結(jié)構(gòu)，效果如下：
還有一點，樹形結(jié)構(gòu)是逐層縮進的，是使用內(nèi)邊距實現(xiàn)的，但是這樣會有點擊范圍的問題，「層級越深，點擊范圍越小」，如下。
之前的方案是用絕對定位實現(xiàn)的，比較巧妙，但也有點難以理解，不過現(xiàn)在發(fā)現(xiàn)了另一種方式也能很好的實現(xiàn)縮進效果，一起看看吧
我們平時使用的一般都是counter，也就是計數(shù)器，比如：
<ul> <li></li> <li></li> <li></li></ul>加上計數(shù)器，通常用偽元素來顯示這個計數(shù)器。
ul { counter-reset: listCounter; /*初始化計數(shù)器*/}li { counter-increment: listCounter; /*計數(shù)器增長*/}li::before { content: counter(listCounter); /*計數(shù)器顯示*/}這就是一個最簡單的計數(shù)器了，效果如下：
我們還可以改變計數(shù)器的形態(tài)，比如改成大寫羅馬數(shù)字（upper-roman）。
li::before { content: counter(listCounter, upper-roman);}效果如下：
有關(guān)計數(shù)器，網(wǎng)上的教程非常多，大家可以自行搜索
然后我們再來看counters()，比前面的counter()多了一個s，叫做「嵌套計數(shù)器」，有什么區(qū)別呢？下面來看一個例子，還是和上面一樣，只是結(jié)構(gòu)上復(fù)雜一些、
<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>效果如下：
看著好像也不錯？但是好像從計數(shù)器上看不出層級效果，我們把counter()換成counters()，注意，counters()要多一個參數(shù)，表示連接字符，也就是嵌套時的分隔符，如下：
li::before { content: counters(listCounter, '-');}效果如下：
是不是可以非常清楚的看出每個列表的層級？下次碰到類似的需求就不需要用 JS 去遞歸生成了，直接用 CSS 渲染，簡單高效，也不會出錯。
默認ul是有padding的，我們把這個去除看看，變成了這樣。
嗯，看著這些「長短不一」的序號，是不是剛好可以實現(xiàn)樹形結(jié)構(gòu)的縮進呢？
回到文章開頭，我們先去除之前的padding-left，會變成這樣。
完全看不清結(jié)構(gòu)關(guān)系，現(xiàn)在我們加上嵌套計數(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)系就行，效果如下：
是不是剛好把每個標題都擠過去了？ 然后我們把中間的連接線去除，這樣可以更方便的控制縮進的寬度。
.tree summary::before{ content: counters(count,""); color: red;}效果如下：
最后，我們只需要設(shè)置這個計數(shù)器的顏色為透明就行了。
.tree summary::before{ content: counters(count,""); color: transparent;}最終效果如下：
這樣做的好處是，每個樹形節(jié)點都是完整的寬度，所以 可以很輕易的實現(xiàn)hover效果，而無需借助偽元素去擴大點擊范圍。
.tree summary:hover{ background-color: #EEF2FF;}效果如下：
還可以通過修改計數(shù)器的字號來調(diào)整縮進，完整代碼可以訪問以下鏈接：
以上就是本文的全部內(nèi)容了，主要介紹了計數(shù)器的兩種形態(tài)，以及想到的一個應(yīng)用場景，下面總結(jié)一下
一個還算實用的小技巧，你學(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。
本文鏈接：http://www.www897cc.com/showinfo-26-53336-0.html妙用 CSS counters 實現(xiàn)逐層縮進
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號