Question

我有一个cms渲染我正在设计的网站的菜单，我需要选择父菜单项的子项。以下是代码的生成方式：

<div class="menu">
    <ul>
         <li></li>
         <li><a href="" class="CurrentButton" ... />text</a>
              <div>
                   <ul></ul>
              </div>
         </li>
    </ul>
</div>

我已经尝试过这个CSS来尝试选择它但是除了显示之外它还没有成功：没有;

.menu ul li div {
    display: none;
}

.menu > ul > li > a.CurrentButton div {
    display: block;
}

谁能看到我做错了什么？ jquery函数会更容易吗？我对jquery比较陌生，所以我不确定如何为它编写函数。

当我在li里面的锚具有类CurrentButton时，我试图在li中选择div，如果li中的锚没有该类，那么我希望它隐藏

Answer 1

如果确实需要具体，请使用相邻元素运算符（+）

.menu > ul > li > a.CurrentButton + div {

否则，您的目标是CurrentButton的后代并且不存在的div。

如果您不需要如此具体，请使用与以前相同的选择器：

.menu > ul > li > div {

Answer 2

~~您提供的两个示例都依赖于查找.menu元素，但代码中不存在任何元素。~~ 现在呢。

a.CurrentButton div选择任何divs内的任何a.CurrentButton 。但是，您的div不在a内。试试这个：

.menu ul > li > a {
    //selects all the as, but non of the divs
}

.menu ul > li > * {
    //selects anything inside a 'li', both 'a's and 'div's
}

要选择div后面的a.CurrentButton，请使用此选项：

.menu ul li > a.CurrentButton + div {
    //any 'div's that are directly after 'a.CurrentButton'
}

Answer 3

假设上面的<ul>是类.menu的元素的子元素，则上面的<div>不是a.CurrentButton的子元素，因此您应该选择它这样：

.menu > ul > li > div {
    display: block;
}

您知道>只选择元素的direct children。

Answer 4

试试这个：

在你的HTML div中是a.CurrentButton的兄弟。因此，您应该使用+符号。

.menu ul li div {
    display: none;
}

.menu > ul > li > a.CurrentButton + div {
    display: block;
}

我正在尝试选择一个嵌套的ul，尝试用css但遇到麻烦

4 个答案: