如何用简洁CSS处理多层嵌套导航的祖先组样式？支持新增层级无需更新

场景说明 #

实际场景是基于界面状态动态生成的导航菜单（笔记本嵌套结构），方便用户跳转，无需逐层操作菜单与嵌套标签：

• selection类表示终端li（导航终点，无子内容），sel类表示导航路径上的节点。
• 即使父节点未选中，也保留每个决策点下的路径；选中父节点时可加载其内部终端li的完整路径。
• 红色路径为从内到外未到达顶层li的路径，绿色为沿CSS祖先路径到达顶层的当前显示路径。目前功能正常，希望优化外观并为用户提供路径记忆展示。

原代码示例 #

CSS #

li.sel > div,
li.selection.sel {
 color: red;
}

.manager > ul > li.sel > div,
.manager > ul > li.selection.sel,
.manager > ul > li.sel > ul > li.sel > div,
.manager > ul > li.sel > ul > li.selection.sel,
.manager > ul > li.sel > ul > li.sel > ul > li.sel > div,
.manager > ul > li.sel > ul > li.sel > ul > li.selection.sel,
.manager > ul > li.sel > ul > li.sel > ul > li.sel > ul > li.sel > div,
.manager > ul > li.sel > ul > li.sel > ul > li.sel > ul > li.selection.sel,
.manager > ul > li.sel > ul > li.sel > ul > li.sel > ul > li.sel > ul > li.sel > div,
.manager > ul > li.sel > ul > li.sel > ul > li.sel > ul > li.sel > ul > li.selection.sel {
 color: green;
}

HTML #

<div class="manager">
<ul>
  <li>
    <div>Group A.1</div>
    <ul>
      <li class="selection">Item 1.1</li>
      <li class="selection">Item 1.2</li>
      <li class="sel">
        <div>Group A.2</div>
        <ul>
          <li class="selection">Item 2.1</li>
          <li class="selection sel">Item 2.2</li>
          <li>
            <div>Group A.3</div>
            <ul>
              <li class="selection">Item 3.1</li>
              <li class="selection">Item 3.2</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="sel">
    <div>Group B.1</div>
    <ul>
      <li class="selection">Item 1.1</li>
      <li class="selection">Item 1.2</li>
      <li class="sel">
        <div>Group B.2</div>
        <ul>
          <li class="selection">Item 2.1</li>
          <li class="selection">Item 2.2</li>
          <li class="sel">
            <div>Group B.3</div>
            <ul>
              <li class="selection sel">Item 3.1</li>
              <li class="selection">Item 3.2</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>    
  <li>
    <div>Group C.1</div>
    <ul>
      <li class="selection sel">Item 1.1</li>
      <li class="selection">Item 1.2</li>
      <li>
        <div>Group C.2</div>
        <ul>
          <li class="selection">Item 2.1</li>
          <li class="selection">Item 2.2</li>
          <li>
            <div>Group C.3</div>
            <ul>
              <li class="selection">Item 3.1</li>
              <li class="selection">Item 3.2</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>      
</ul>       
</div>

优化方案 #

简洁版CSS #

利用后代选择器替代重复的逐层嵌套选择器，支持无限嵌套层级，新增层级无需修改CSS：

/* 未连通顶层的选中节点：红色 */
li.sel > div,
li.selection.sel {
  color: red;
}

/* 连通顶层的完整选中路径：绿色 */
.manager > ul > li.sel > div,
.manager > ul > li.selection.sel,
.manager > ul > li.sel li.sel > div,
.manager > ul > li.sel li.selection.sel {
  color: green;
}

方案说明 #

1. 选择器逻辑：
   • 红色样式：匹配所有sel类的节点，作为默认样式
   • 绿色样式：仅匹配从顶层ul开始，所有处于连续sel链中的节点（即路径从顶层选中节点延伸下来的所有选中项）
2. 优先级保障：绿色选择器包含.manager和顶层ul的限定，权重高于红色选择器，因此会自动覆盖红色样式，符合路径显示需求
3. 扩展性：li.sel li.sel这种后代选择器会匹配任意嵌套层级的选中节点，新增嵌套层级时无需修改CSS即可生效

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