当前位置: 首页 > Web前端 > CSS

用纯css实现树结构

时间:2023-03-31 01:59:32 CSS

用纯css实现属性结构**用css实现属性结构的思路是用伪类实现树结构连线。完成。展开和收缩其实就是点击一个元素和它的子元素进行隐藏和显示之间的切换。**效果图html结构

  • 一级菜单
    • 二级菜单
    • 二级菜单
      • 三级菜单
      • li>
      • 三级菜单
  • 一级菜单
    • 二级菜单
    • 二级菜单
  • cssul.domtree,ul.domtreeul{margin:0;填充:0002em;}ul.domtreeli{列表样式:无;位置:相对;}ul.domtree>li:first-child:before{border-style:nonenonesolidnone;}ul.domtreeli:before{position:绝对的;内容:'';顶部:-0.01em;左:-0.7em;宽度:0.5em;高度:0.615em;border-style:nonenonesolidsolid;边框宽度:0.05em;边框颜色:#aaa;}ul.domtreeli:not(:last-child):after{position:absolute;内容:'';顶部:0.7em;左:-0.7em;底部:0;边框样式:无无无实心;边框宽度:0.05em;边框颜色:#aaa;}