我正在尝试选择嵌套的ul，尝试使用CSS但遇到了麻烦

Question

I have a cms rendering the menus for a website I am designing and I need to select the children of the parent menu items. Here is how the code is generated:

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

I have tried this CSS to try to select it but it's been unsuccessful as of yet aside from the display :none;

.menu ul li div {
    display: none;
}

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

can anyone see what I'm doing wrong? Would a jquery function be easier? I'm fairly new to jquery so I'm not sure how to go about writing a function for it.

I am trying to select the div within the li when the anchor within that li has the class CurrentButton, if the anchor within the li doesn't have the class then I want it hidden

Answer 1

If you really need to be specific, use the adjacent elements operator ( + )

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

Otherwise, you are targeting a div that is the descendent of CurrentButton and that doesn't exist.

If you don't need to be so specific, use the same selector as before:

.menu > ul > li > div {

Answer 2

Both of the examples you give rely on finding the .menu element, but none exists in your code. it does now.

a.CurrentButton div selects any divs inside of any a.CurrentButton s. However, your divs are not inside the a s. Try this:

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

To select div s that follow a.CurrentButton s, use this:

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

Answer 3

Assuming the <ul> above is a child of an element with the class .menu , the <div> above is not a child of a.CurrentButton , so you should select it like this:

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

Just so you know > only selects direct children of an element.

Answer 4

Try this:

In your HTML div is a sibling of a.CurrentButton. So, you should use + sign.

.menu ul li div {
    display: none;
}

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