家庭树HTML/CSS问题：Mother节点下UL设为dotted后连接线消失

可能的原因 #

• CSS选择器匹配失败：你写的.dotted选择器路径不对，比如原来的.normal是和父元素组合使用的（比如.family-tree li .normal），但.dotted只写了单独的.dotted，导致样式没命中目标UL元素。
• 优先级被覆盖：其他针对该UL的CSS规则（比如标签选择器ul）优先级比.dotted高，或者.normal的选择器更具体（带了父元素前缀），替换成.dotted后失去了高优先级，被默认样式覆盖。
• 类名拼写错误：HTML里的类名可能写错了（比如多打了字母），或者CSS里的.dotted拼写有误，导致两者不匹配。
• 缺失必要样式属性：.normal里包含了连接线的基础样式（比如border-left、position、padding等），而.dotted只改了边框样式，没保留这些基础属性，导致连接线直接消失。

修复步骤 #

1. 核对类名拼写：先检查HTML中目标UL的class是否确实是dotted，CSS里的类名是否完全一致，避免拼写失误。
2. 对齐选择器路径：把.dotted的选择器改成和.normal完全相同的路径结构。比如原来的.normal样式是：

   .family-tree .mother-node > ul.normal {
     border-left: 1px solid #000;
     position: relative;
     padding-left: 30px;
   }
   

   那.dotted也要写成：

   .family-tree .mother-node > ul.dotted {
     border-left: 1px dotted #000;
     position: relative;
     padding-left: 30px;
   }
   

3. 继承基础样式：如果.normal和.dotted大部分样式一致，可把公共样式抽离到通用选择器，再单独写虚线样式：

   /* 公共基础样式 */
   .family-tree .mother-node > ul {
     position: relative;
     padding-left: 30px;
     margin-left: 0;
   }
   /* 实线样式 */
   .family-tree .mother-node > ul.normal {
     border-left: 1px solid #000;
   }
   /* 虚线样式 */
   .family-tree .mother-node > ul.dotted {
     border-left: 1px dotted #000;
   }
   

4. 用开发者工具排查：按F12打开浏览器开发者工具，选中目标UL元素，查看Styles面板：
   • 如果.dotted样式被划掉，说明被优先级更高的规则覆盖，需要调整选择器的具体性；
   • 如果.dotted样式根本没出现，说明选择器没匹配上，检查路径或拼写。

内容的提问来源于stack exchange，提问作者MikeTeX