如何分隔嵌套列表樣式中的樣式？

Question

我有一個列表和列表也有它的列表。
我在父列表上設置樣式，但我想爲父母和孩子列表不同的樣式，但他們混合在一起，我不能將它們分開。

HTML文件：

<ul id="accountNavigation"> 
    <li><a href="#">Something</a></li>      
    <li id="userNavigation"> 
    <img src="https://si0.twimg.com/profile_images/135460415/UAB_dragon_head_normal.png" alt=""/> 
    <a href="#">Username</a> 
    <div class="showme"> 
     <ul id="userNavigationSubMenu"> 
     <li>test</li> 
     <li>test</li> 
     <li>test</li> 
     <li>test</li> 
     <li>test</li> 
     <li>test</li> 
     <li>test</li> 

     </ul> 
    </div> 
    </li> 
</ul> 

CSS文件：

body{background:#ff0000;} 
#accountNavigation{ list-style: none;float: right;height: 44px;} 
#accountNavigation li{ float: left;color: #fff;height: 44px;} 
#accountNavigation li:hover{ background: #ddd;cursor: pointer;} 
#accountNavigation li a{ text-decoration: none;color: #fff;line-height: 44px;font-weight: bold;font-size: 13px;height: 44px;padding: 15px 27px 0 14px;outline: none;} 
#accountNavigation li img{ position: absolute;top: 12px;left: 10px;width: 22px;height: 22px;} 
#userNavigation{position: relative;} 
#userNavigation a {padding-left: 38px !important;} 

#userNavigation{} 
#userNavigation:hover{} 
#userNavigation:hover .showme{display: inline;} 
.showme 
{ 
    display: none; 
    width: 140px; 
    height: 200px; 
    background: #f5f5f5; 
    margin: 0px auto; 
    padding: 10px 5px 0px 5px; 
    border: 1px solid #ddd; 
    border-top: none; 
    z-index: 10; 
    position: absolute; 
    right:0; 
    top: auto; 

} 
#userNavigation ul { list-style: none;} 

這是fiddle。

Answer 1

只需使用>直接/直接後裔組合子和id到指定li（或ul）元素你的目標：

#accountNavigation { /* outer ul element */ 
} 

#accountNavigation > li { /* outer ul element's children li */ 
} 

#accountNavigation > li > ul { /* first 'inner' ul element */ 
} 

#accountNavigation > li > ul > li { /* first 'inner' ul element's li children */ 
} 

你可以，當然，更通用的，簡單地使用：

ul { /* targets all ul elements */ 
    /* general styles */ 
} 
ul li { /* targets all li elements within a ul */ 
    /* general styles */ 
} 
ul li ul { /* targets all ul elements within an li element, itself within a ul */ 
    /* overrule general 'outer' styles */ 
} 
ul li ul li { /* targets all li elements within a ul element, 
       within an li element, itself within a ul...and so on */ 
    /* overrule general 'outer' styles */ 
} 

使用一般方法：

<ul> 
    <li>This should be green!</li> 
    <li>This is also green... 
     <ul> 
      <li>But this is not, it's, um...blue!</li> 
      <li>And so on...</li> 
     </ul></li> 
    <li>This is green too, just because.</li> 
</ul> 

下面的CSS應證明其用途：

ul li { 
    color: green; /* the 'general'/'default' settings */ 
    margin-left: 10%; 
} 

ul li ul li { 
    color: blue; /* this overrides the 'general' color setting */ 
       /* the margin is not overridden however */ 
}​ 

JS Fiddle demo。

參考文獻：

• CSS Selectors (Level 3), at the W3.org。

Answer 2

您是否嘗試過CSS子選擇器？

ul { /* parent list styles here */ } 
ul > li > ul { /* child list styles here */ } 

Answer 3

使用 ul li ul li {...}或者

ul li ul {....}給不同風格的兒童名單。如果您正在尋找帶有子菜單的導航菜單。

Here是一個很好的例子。

它使用CSS3。