什么是CSS 关系图？
CSS关系图是一种视觉工具，它通过图表的形式直观地展示了CSS选择器之间的相互关系、层叠顺序以及它们如何相互覆盖。这种图表的核心基于CSS的层叠规则和选择器优先级，使得开发者能够更清晰地理解：
- 选择器层级：不同CSS选择器在DOM树中的匹配方式和它们之间的层级关系。
- 优先级：各个选择器的优先级，即它们在CSS规则中的重要性和权重。
- 层叠和覆盖：某些CSS规则是如何因为优先级更高而覆盖其他规则的。
通过这种图形化的展示，CSS关系图帮助开发者在构建和维护复杂的样式表时，能够更有效地识别和解决样式冲突，优化选择器的使用，以及理解继承和层叠的工作原理。简而言之，CSS关系图是理解和管理CSS复杂性的一个重要辅助工具。
这是常见的人物关系图，包含下划线和上竖线和横线
关系图是一种用于展示CSS选择器及其相互关系的可视化工具，它由以下几个关键组成部分构成：
- 选择器：这些是CSS规则的基础，用于指定哪些HTML元素应该应用特定的样式。在关系图中，每个选择器通常被表示为一个节点。
- 关系：这些是连接不同选择器的线条或箭头，它们展示了选择器之间的层级和关联方式，如后代、子代和兄弟关系。
- 优先级：这涉及到选择器的特定度和重要性，决定了它们在层叠样式表中的优先级。特定度高的选择器会覆盖特定度低的选择器的样式。
- 继承：CSS中的一些属性可以从父元素传递给子元素。在关系图中，继承通常通过箭头来表示，指向继承了样式的子元素。
利用CSS关系图，开发者可以：
- 验证选择器的准确性：确保选择器正确地匹配了预期的HTML元素，避免不必要的样式应用。
- 识别继承冲突：理解哪些CSS属性是直接指定的，哪些是从父元素继承的，这有助于解决样式不一致的问题。
- 计算特定度：通过理解不同选择器的权重，开发者可以预测哪些样式会最终应用到元素上。
- 理解样式覆盖：了解基于优先级规则，哪些样式会覆盖其他样式，这对于解决样式冲突和优化CSS代码非常关键。
总的来说，CSS关系图是一个强大的分析和调试工具，它帮助开发者更好地理解和管理CSS的复杂性，从而提高网页的样式开发和维护效率。
那使用纯css，怎么实现呢？
1.首先给每一个容器添加基本样式，间距，文字居中显示，保证容器不会重叠到一起去~
// 对应的css样式
.div {
width: 80px;
height: 80px;
display: flex;
background-color: aquamarine;
/* 盒子距离 */
margin-bottom: 50px;
margin-right: 50px;
display: flex;
justify-content: center;
align-items: center;
}
每个容器是否需要添加下线条连接，判断的依据是有无children，如果有children添加css 伪类样式，没有就不要添加下划线连接，这样看起来就比较符合关系图
/* 下线条 */
.xia::after {
content: '';
width: 1px;
/* 线条往下的高度 */
height: 25px;
bottom: -25px;
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: black;
}
上线条也是同理，根据是不是父类去实现伪类线条
/* 上线条 */
.shang::before {
content: '';
width: 1px;
/* 线条往下的高度 */
height: 25px;
top: -25px;
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: black;
}
然后横线条在父元素添加伪类时，定位到子元素的上线条上面
.heng::after {
content: '';
/* 需要剪去盒子的大小和偏移量 */
width: 100%;
height: 1px;
position: absolute;
left: 40px;
top: -25px;
background-color: black;
}
最终实现的效果图，根据数据结构去渲染对应的线条~
对应的数据的结构，name和children，children是一个list，以此类推去构建我们的关系图的数据
