要使用 CSS 实现树形结构，需要利用 HTML 元素的嵌套关系以及 CSS 的选择器和伪元素等特性。一种常见的做法是使用无序列表（<ul>）和有序列表（<ol>）来表示树形结构的父子关系，然后通过 CSS 中的样式规则和伪元素来控制树形结构的外观和展示。下面是实现树形结构的一些关键步骤：
创建嵌套的列表结构：<ul><li>Parent<ul><li>Child 1</li><li>Child 2</li></ul></li></ul>
利用 CSS 选择器和属性对树形结构进行修饰，如修改字体、颜色、边距等：ul {list-style:none; margin:0; padding:0;} li {margin:0; padding:0 0 0 1em; position:relative;} li:before {content:''; position:absolute; top:0; left:-0.5em; border-left:1px solid #000; height:1.33em;}
其中，ul {list-style:none; margin:0; padding:0;}用于去除列表默认样式；li {margin:0; padding:0 0 0 1em; position:relative;}用于去除列表项默认样式，并设置相对定位，方便后续利用伪元素绘制连接线，padding:0 0 0 1em; 是为了让子项向右缩进；li:before {content:''; position:absolute; top:0; left:-0.5em; border-left:1px solid #000; height:1.33em;}用于绘制连接线，这里利用伪元素 :before 来添加内容（即连接线）并设置样式。
利用伪类和属性选择器控制树形结构的展开和折叠状态。如下代码可以使得每个父项前面出现一个“+”号，表示为未展开状态，并且当点击“+”号时，隐藏该项下面的所有子项：
li>ul {
display:none; /* 默认隐藏 */
}
li.close:before {
content:'+'; /* 未展开状态 */
}
li.open:before {
content:'-'; /* 展开状态 */
}
li.close>ul, li.open>ul {
display:block; /* 点击时显示其下子项 */
}以上是实现树形结构的基本步骤和关键代码，其中使用了 CSS 中的选择器、伪元素、属性等功能来控制树形结构的外观和交互效果。需要注意的是，树形结构的实现不仅需要 HTML 和 CSS 的配合，还需要 JavaScript 或其它前端框架的支持来实现动态效果。