Question

我正在尝试使用class =＆＃34; category-nav＆＃34;制作子菜单。仅适用于＆＃34;颜色＆＃34;选项（因此它不应存在或显示任何其他选项）。

显示：无效但当我尝试使用组合兄弟选择器来显示块时，仅为选项＆＃34; color＆＃34;指定显示子菜单。这是行不通的。（.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

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

但是，您必须使用某些Javascript将active课程应用到<li>中的每个.add-nav。只需要几行代码来检查点击了哪个链接，并根据它显示/隐藏您的.category-nav。在我看来，这是最好的方式。

显示：无/显示：带有组合兄弟选择器的块

1 个答案: