本文解析家族树中 下行连接线消失的根本原因——CSS 选择器 .tree ul.normal ul.normal::before 错误限定了双重嵌套条件，导致实际 DOM 结构（父 ul.normal 包裹子 ul.dotted）无法命中规则；通过精简为 .tree ul.normal::before 和 .tree ul.dotted::before 即可精准控制各级连接线样式。
本文解析家族树中 `
- ` 下行连接线消失的根本原因——css 选择器 `.tree ul.normal ul.normal::before` 错误限定了双重嵌套条件，导致实际 dom 结构（父 `ul.normal` 包裹子 `ul.dotted`）无法命中规则；通过精简为 `.tree ul.normal::before` 和 `.tree ul.dotted::before` 即可精准控制各级连接线样式。
在构建 CSS 驱动的家族树（Family Tree）时，视觉连通性高度依赖伪元素（如 ::before）生成的垂直/水平连接线。一个常见却隐蔽的问题是：为某级 显式添加 class="dotted" 后，预期的虚线向下连接线却完全消失
。表面看 HTML 结构无误，CSS 类名也已正确声明，但开发者工具中检查该
- 元素会发现其 ::before 伪元素未渲染出任何 border-left —— 根本原因在于 CSS 选择器的层级匹配逻辑被过度约束。
原始 CSS 中的关键规则如下：
.tree ul.normal ul.normal::before {
border-left: 0.3125em solid #ccc;
}
.tree ul.dotted ul.dotted::before {
border-left: 0.1875em dotted #456990;
}
该写法要求：只有当一个 ul.normal 元素直接嵌套在另一个 ul.normal 内部时，才应用实线；同理，虚线仅作用于 ul.dotted 嵌套在 ul.dotted 中的场景。然而，HTML 中“Mother”节点下的
- 实际位于
- 内部（即 .tree > ul.normal > li > ul.dotted），完全不满足 ul.dotted ul.dotted 的父子关系，因此样式规则被跳过，border-left 属性从未生效。
✅ 正确解法是将选择器降级为直接作用于带类名的 元素自身
，而非其父容器：
/* 移除冗余嵌套，直接匹配目标 ul */
.tree ul.normal::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 1.3125em; /* ≈21px */
border-left: 0.3125em solid #ccc;
}
.tree ul.dotted::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 1.3125em;
border-left: 0.1875em dotted #456990;
border-radius: 0;
}
同时，为确保所有向下连接线（无论父级类名）均能渲染，建议统一前置基础样式：
/* 所有 .tree 下的 ul 子元素（非顶层）都需 ::before 连接线 */
.tree ul ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 1.3125em;
}
⚠️ 关键注意事项：
- 避免过度嵌套选择器：ul.normal ul.normal 这类写法易造成样式“不可见失效”，调试时务必在浏览器开发者工具中逐层验证元素实际匹配的 CSS 规则（Elements → Styles 面板）。
- 伪元素需显式定义 content：若遗漏 content: ''，即使其他属性正确，::before/::after 也不会渲染。
- 类名继承需明确作用域：.dotted 类应同时应用于
- （影响左右横线）和
- （影响向下竖线），二者语义独立，不可互相替代。
- 重置默认样式：ul 默认有 padding-inline-start，需设为 0 并用 padding-top 统一控制垂直间距，避免布局错位。
通过此修正，家族树中任意层级的
- 均能稳定渲染虚线下行连接线，实现“Mother → Me/Sister”的视觉断开效果，同时保持整体结构的可维护性与可扩展性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
