Raft算法：保障分布式系統共識的穩健之道
1. 什么是Raft算法？Raft 是英文”Reliable、Replicated、Redundant、And Fault-Tolerant”（“可靠、可復制、可冗余、可容錯”）的首字母縮寫。Raft算法是一種用于在分布式系統
之前使用純 CSS 實現了一個樹形結構，效果如下：
還有一點，樹形結構是逐層縮進的，是使用內邊距實現的，但是這樣會有點擊范圍的問題，「層級越深，點擊范圍越小」，如下。
之前的方案是用絕對定位實現的，比較巧妙，但也有點難以理解，不過現在發現了另一種方式也能很好的實現縮進效果，一起看看吧
我們平時使用的一般都是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;}效果如下：
還可以通過修改計數器的字號來調整縮進，完整代碼可以訪問以下鏈接：
以上就是本文的全部內容了，主要介紹了計數器的兩種形態，以及想到的一個應用場景，下面總結一下
一個還算實用的小技巧，你學到了嗎？
[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.tebozhan.com/showinfo-26-53336-0.html妙用 CSS counters 實現逐層縮進
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Redis Sentinel的監控和自動化處理Redis節點故障恢復機制
下一篇： 被面試官PUA了：創建索引時一定會鎖表
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號