分別定製菜單的一級和子級

Question

我在wordpress中使用菜單，使用wp-menu。 它自動生成我的菜單。然後我可以用css自定義我的菜單。 我想分開定製我的第一級李，和所有的子級李。例如， 我想在第一級應用20像素左側的填充，而在子級別沒有填充。

在這種情況下，我加入這個代碼我的第一級菜單的第三個元素的後面添加內容，但它被添加alors我所有的子級菜單......

ul#menu-menu_top li:nth-child(3):after{content:" | ";color:yellow} 

這裏我的CSS：

.menu-menu_top-container{background-color: #1C2336} 

ul#menu-menu_top, ul#menu-menu_top ul.sub-menu { 
    padding:0; 
    margin: 0; 
} 
ul#menu-menu_top li, ul#menu-menu_top ul.sub-menu li { 
    list-style-type: none; 
    display: inline-block; 
} 
ul#menu-menu_top li:nth-child(3):after{content:" | ";color:yellow} 

/*Link Appearance*/ 
ul#menu-menu_top li a { 
    text-decoration: none; 
    color: #fff; 
    padding: 5px; 
    display:inline-block; 

    padding-left: 20px; 
} 

ul#menu-menu_top li { 
    position: relative; 
} 

ul#menu-menu_top li ul.sub-menu { 
    display:none; 
    position: absolute; 
    left: 0; 
    width: 100px; 
} 

ul#menu-menu_top li ul.sub-menu li a{background-color: white;color:#1C2336;width:300px;} 
ul#menu-menu_top li ul.sub-menu li a:hover{background-color: #1C2336;color: white} 

ul#menu-menu_top li:hover ul.sub-menu { 
    display:block; 
} 

，並與我的HTML一個的jsfiddle：

http://jsfiddle.net/JpqNs/

任何人都可以幫助我嗎？ 非常感謝

Answer 1

這可以簡單地通過使用> CSS選擇器來解決。例如，如果您有下面的代碼：

<ul class="layer1"> 
    <li> 
     Link 
    </li> 
    <li> 
     Link 
    </li> 
    <li> 
     <ul class="layer2"> 
      <li> 
       Link 
      </li> 
      <li> 
       Link 
      </li> 
     </ul> 
    </li> 
</ul> 

您可以使用CSS .layer1>li{YourStylesHere}隻影響那些你layer1的<ul>的直接子li元素。這不會影響兒童的孩子，例如您的layer2的<li>元素<ul>