我正在尝试选择嵌套的 ul，尝试使用 css 但遇到问题

Question

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

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

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

.menu ul li div {
    display: none;
}

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

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

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

Answer 1

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

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

.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
}

要选择divs 跟在a.CurrentButtons 之后，使用这个：

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

Answer 2

如果你真的需要具体，使用相邻元素运算符（+）

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

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

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

.menu > ul > li > div {

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;
}