html - 使用 CSS，仅针对列表中重复出现的模式的一部分

Question

我有这个列表片段。它的生成超出了我的控制范围，我只能修改 CSS。

<ul class="menu">
    <li class=" menuItem1 first parent"></li>
    <li class=" menuItem2 parent"></li>
    <li class=" menuItem3 parent"></li>
    <li class=" menuItem4 parent selected"> 
        <ul class="nccUlMenuSub1">
            <li class=" menuItem1 first parent"></li>
            <li class=" menuItem2"></li>
            <li class=" menuItem3 selected parent">
                <ul class="nccUlMenuSub2">
                    <li class=" menuItem1 first"></li>
                    <li class=" menuItem2"></li>
                    <li class=" menuItem3"></li>
                    <li class="menuItem4 last"></li>
                    <!-- Even if this pattern continues, I do not want to display it-->
                </ul>
    ... and the list goes on

我想使用 display: none CSS 规则隐藏除上面列表的这一部分之外的所有内容:

            <li class=" menuItem3 selected parent">
                <ul class="nccUlMenuSub2">
                    <li class=" menuItem1 first"></li>
                    <li class=" menuItem2"></li>
                    <li class=" menuItem3"></li>
                    <li class="menuItem4 last"></li>
                    <!-- Even if this pattern continues, I do not want to display it-->
                </ul>

到目前为止，我开发的 CSS 隐藏了第二个代码段中除第一行以外的所有内容。

.menu .selected ul.nccUlMenuSub1 li[class*="menuItem"]:not(.selected) {
    display: none;
}

我如何修改我的 CSS 以允许我选择的元素及其子级的两个级别(特别是 .nccUlMenuSub2 及其第一级 <li> )？

Answer 1

隐藏除目标之外的所有内容:

.menu > li:not(.selected),
.menu > li.selected > ul > li:not(.selected),
.menu > li.selected > ul > li.selected > ul:not(.nccUlMenuSub2),
.menu > li.selected > ul > li.selected > ul.nccUlMenuSub2 ul
{
    display: none;
}

这将隐藏除一层 ul.nccU1MenuSub2 和它的直接子级 li 之外的所有内容。任何进一步的 ul 子菜单都将被隐藏，并且 ul 的所有 sibling 和父级的 sibling 都将被隐藏。

JSFiddle