我試圖選擇一個嵌套的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要儘量選擇它，但它一直不成功作爲然而除了顯示：無;

.menu ul li div { 
    display: none; 
} 

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

任何人都可以看到我做錯了什麼？ jQuery的功能會更容易嗎？我對jQuery相當陌生，所以我不確定如何去爲它寫一個函數。

我想選擇裏內div時，李中的錨具有類CurrentButton，如果李內錨沒有類，那麼我想它隱藏

Answer 1

的你給的例子都依賴於找到.menu元素，但沒有在你的代碼存在。它現在。

a.CurrentButton div選擇任何divs內部的任何a.CurrentButton s。但是，您的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 s表示遵循a.CurrentButton S，使用此：

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

Answer 2

如果你真的需要具體而言，使用相鄰的元件運算符（+）

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

否則，您的目標一個div是的CurrentButton後代和不存在。

如果你不需要這麼具體，使用相同的選擇像以前一樣：

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