html - 在定义的级别后隐藏第 n 个嵌套的 UL

Question

<ul class="navTreeLevel0">
    <li></li>
    <li>
        <li></li>
        <ul class="navTreeLeve1">
          <li>
            <ul class="navTreeLevel2"></ul>
          </li>
        </ul>
    </li>
</ul>

任何 li 都可能有第 n 个 li 包含另一个 ul 级别。每个 ul 级别都有一个递增类 navTreeLevel(++)。我现在使用以下 CSS 隐藏超过 2 的关卡。

.navTreeLevel3, navTreeLevel4 {
    display: none;
}

我不控制生成此侧边栏的 html。我希望能够隐藏 2 之后的所有级别。(3,4,5,6,..) 有没有办法通过在 2 之后拥有所有 .navTreeLevel 来选择类(class)？

Answer 1

开始时隐藏所有内容然后显示您想要的内容可能会更容易。

ul[class^=navTreeLevel] {
    display:none;
}
.navTreeLevel0,.navTreeLevel1,.navTreeLevel2 {
    display:block;
}