Display:none / Display:block 与组合的同级选择器

Question

我正在尝试使带有 class= "category-nav" 的子菜单仅对 "color" 选项有效（因此对于任何其他选项，它都不应该存在或显示）。

显示：无，但是当我尝试使用组合的同级选择器来指定仅显示“颜色”选项的子菜单时，它不起作用。 （.add-nav #color ~ .category-nav {display:block}）。我究竟做错了什么？有没有另一种方法可以用 css 做到这一点？我不希望为此使用 JavaScript，因为该页面已经是 JavaScript 繁重的。

<ul class="add-nav">
                            <li><a href="#">shape</a></li>
                            <li id = "color" class="active"><a href="#">color</a></li> 
                            <li><a href="#">pattern</a></li>
                            <li><a href="#">size</a></li>
                            <li><a href="#">overall</a></li> 
</ul>
                        <ul class="category-nav">
                            <li class="active"><a href="#">all</a></li>
                            <li><a href="#">Red</a></li>
                            <li><a href="#">Orange</a></li>
                            <li><a href="#">Yellow</a></li>
                            <li><a href="#">Green</a></li>
                            <li><a href="#">Blue</a></li>
                            <li><a href="#">Purple</a></li>
                        </ul>

这是css

.add-nav{
    width:100%;
    padding:0;
    margin:10px 0 0px;
    list-style:none;
    border-bottom:1px solid #cecece;
    display:table;
    text-transform:uppercase;
    font-size:10px;
    line-height:14px;
}
.add-nav li{
    text-align:center;
    display:table-cell;
    vertical-align:bottom;
}
.add-nav li a{
    display:block;
    padding:21px 5px 16px;
    color:#636363;
}
.add-nav li a:hover,
.add-nav .active a{
    font-weight:700;
    text-decoration:none;
    color:#272727;
    background:#f2f2f2;
}
.category-nav{
    padding:5px 13px 7px;
    margin:0 0 0px;
    list-style:none;
    background:#f2f2f2;
    width:100%;
    font-size:10px;
    font-variant:small-caps;
    display:table;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.category-nav li{
    text-align:center;
    display:table-cell;
    vertical-align:bottom;
}
.category-nav li a{color:#636363;}
.category-nav li a:hover{
        text-decoration:none;
    color:#ff6699;
}
\\.category-nav{
        display:none;\\
}
.category-nav .active a{
    color:#ff6699;
    font-weight:700;
}

这是JS Fiddle中的代码

Answer 1

您正在寻找的是一个 CSS 父选择器，doesn't exist。

你的代码说：

.add-nav li.active #color ~ .category-nav     // I added the .active class

这实际上是选择与.category-nav 匹配的#color 的所有兄弟姐妹。现在，.category-nav 不是#color 的兄弟；它是.add-nav 的兄弟姐妹。你真正想要做的是选择.add-nav的兄弟姐妹...但只有当它包含li.active #color时。换句话说，你想定义一些东西，然后选择，不是事物本身，而是它的父对象。这是不可能的，关于为什么不允许here 有一个有趣的讨论。基本上，这类事情会在浏览器中引入巨大的性能问题。

但是，当您单击 .add-nav 中的每个 <li> 时，您必须使用一些 Javascript 将其应用到 active 类。只需几行代码即可检查单击了哪个链接并基于此显示/隐藏您的.category-nav。这是我认为最好的方法。