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的每个兄弟和父母的兄弟姐妹都将被隐藏。

使用CSS，仅列出列表中重复模式的一部分

1 个答案:

JSFiddle