這次帶給大家純css實作樹狀結構，純css實作樹狀結構的注意事項有哪些，以下就是實戰案例，一起來看一下。
本文我要跟大家介紹如何使用CSS和HTML就可以將一個多層無序列表的節點展現成樹狀結構。樹狀結構我們在許多專案中要應用，如公司組織架構圖、無限分類等等。
純css實現屬性結構
css實作屬性結構的想法是利用偽類實現樹狀結構連接線，如果想實現點擊展開和收縮以及復選框效果還得配合js來實作。其實展開和收縮就是一個點擊元素其子元素隱藏和顯示的切換。
效果圖
html結構
<ul class="domtree"> <li> 1级菜单 <ul> <li>2级菜单</li> <li> 2级菜单 <ul> <li>3级菜单</li> <li>3级菜单</li> </ul> </li> </ul> </li> <li> 1级菜单 <ul> <li>2级菜单</li> <li>2级菜单</li> </ul> </li> </ul>
css
ul.domtree,
ul.domtree ul {
margin: 0;
padding: 0 0 0 2em;
}
ul.domtree li {
list-style: none;
position: relative;
}
ul.domtree>li:first-child:before {
border-style: none none solid none;
}
ul.domtree li:before {
position: absolute;
content: '';
top: -0.01em;
left: -0.7em;
width: 0.5em;
height: 0.615em;
border-style: none none solid solid;
border-width: 0.05em;
border-color: #aaa;
}
ul.domtree li:not(:last-child):after {
position: absolute;
content: '';
top: 0.7em;
left: -0.7em;
bottom: 0;
border-style: none none none solid;
border-width: 0.05em;
border-color: #aaa;
}相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是純css實現樹狀結構的詳細內容。更多資訊請關注PHP中文網其他相關文章！
