html 纯css 树形结构,纯css实现树形结构方法教程

好的，下面是一种纯CSS实现树形结构的方法：

HTML结构：

<ul class="tree">
  <li>
    <span>节点1</span>
    <ul>
      <li>
        <span>节点1-1</span>
      </li>
      <li>
        <span>节点1-2</span>
        <ul>
          <li>
            <span>节点1-2-1</span>
          </li>
          <li>
            <span>节点1-2-2</span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <span>节点2</span>
  </li>
  <li>
    <span>节点3</span>
  </li>
</ul>

CSS样式：

.tree li {
  list-style-type: none;
  margin: 0;
  padding: 10px 0 0 20px;
  position: relative;
}

.tree li::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -20px;
  width: 1px;
  height: 100%;
  border-left: 1px solid #ccc;
}

.tree li::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -20px;
  width: 16px;
  height: 0;
  border-top: 1px solid #ccc;
}

.tree li:last-child::after {
  display: none;
}

.tree li.parent::after {
  height: calc(100% + 10px);
  border-top: 1px solid #ccc;
  border-left: none;
  top: -10px;
  left: -20px;
}

.tree li.parent > span {
  font-weight: bold;
}

.tree li ul {
  margin: 0;
  padding: 0;
}

.tree li ul li {
  padding: 10px 0 0 20px;
}

.tree li ul li::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -20px;
  width: 1px;
  height: 100%;
  border-left: 1px solid #ccc;
}

.tree li ul li::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -20px;
  width: 16px;
  height: 0;
  border-top: 1px solid #ccc;
}

.tree li ul li:last-child::after {
  display: none;
}

.tree li ul li.parent::after {
  height: calc(100% + 10px);
  border-top: 1px solid #ccc;
  border-left: none;
  top: -10px;
  left: -20px;
}

.tree li ul li.parent > span {
  font-weight: bold;
}

在上面的代码中，我们首先定义了一个具有.tree类的无序列表作为树的容器。然后，我们使用CSS样式来控制列表项和它们之间的连接线。我们使用伪元素::before和::after来创建这些线，并使用绝对定位来将它们放置在适当的位置。我们还使用类parent来标记具有子元素的列表项，并应用不同的样式来突出显示它们。

这是一个基本的树形结构，你可以根据需要添加更多的样式和交互效果。