Jak oddzielić style w zagnieżdżonej stylizacji listy?

Question

Mam listę i listę również zawiera listę w nim.
Ustawiam style na liście nadrzędnej, ale chcę mieć różne style dla listy nadrzędnej i podrzędnej, ale są one mieszane, ponieważ nie mogę ich oddzielić.

plik 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> 

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

To fiddle.

Answer 1

Wystarczy użyć > bezpośredni/natychmiastowe potomka COMBINATOR, i id aby określić, które li (lub ul) Elementy jesteś kierowania:

#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 */ 
} 

Można, oczywiście, być bardziej ogólny i po prostu użyć :

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 */ 
} 

Korzystanie ogólne podejście:

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

Poniższy CSS powinien wykazać zastosowanie:

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.

Odniesienia:

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

Answer 2

Czy próbowałeś selektorów CSS?

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

Answer 3

Użyj ul li ul li {...} Albo

ul li ul {....} dać inny styl do listy obiektów podrzędnych. jeśli szukasz menu nawigacyjnego z menu podrzędnym.

to naprawdę dobry przykład tego samego.

Używa CSS3.