Làm cách nào để tách kiểu trong kiểu danh sách lồng nhau?

Question

Tôi có một danh sách và danh sách cũng có danh sách trong đó.
Tôi đặt kiểu trên danh sách mẹ nhưng tôi muốn các kiểu khác nhau cho danh sách mẹ và con nhưng chúng được trộn lẫn bằng cách nào đó tôi không thể tách chúng ra.

tập tin 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 file:

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

Đây là fiddle.

Answer 1

Đơn giản chỉ cần sử dụng > trực tiếp/trực tiếp hậu duệ combinator, và một id để xác định các li (hoặc ul) yếu tố mà bạn đang nhắm mục tiêu:

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

Bạn có thể, tất nhiên, hãy chung chung hơn và chỉ cần sử dụng :

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

Sử dụng cách tiếp cận chung:

<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 sau đây sẽ chứng minh việc sử dụng nó:

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.

Tài liệu tham khảo:

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

Answer 2

Bạn đã thử chọn CSS con chưa?

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

Answer 3

Sử dụng ul li ul li {...} Hoặc

ul li ul {....} để cung cấp cho phong cách khác nhau để danh sách trẻ em. nếu bạn đang tìm kiếm menu điều hướng với menu con.

Here thực sự là ví dụ tuyệt vời giống nhau.

Nó sử dụng CSS3.