嵌套列表CSS覆蓋樣式（#id + class）

Question

一個特殊的嵌套列表，父代div id和不同類別的列表項......我無法讓它正確分配背景顏色。

例如：

<div id="sidebar" class="widget-area"> 
<div class="theiaStickySidebar"> 
    <aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu"> 
     <ul class="parent-sidebar-menu"> 
      <li class="current_page_ancestor"> 
       <a href="http://somesite/about-us/">About Us</a> 
       <ul class="child-sidebar-menu"> 
        <li class="page_item"> 
         <a href="http://somesite/about-us/welcome/">Welcome</a> 
        </li> 
        <li class="page_item current_page_item"> 
         <a href="http://somesite/about-us/mission-and-philosophy/">Mission and philosophy</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </aside> 
</div> 

，你會用什麼CSS代碼來改變每個L1的背景顏色/屬於current_page_ancestor類，page_item和current_page_item一個項目（每個人都應該有不同的顏色）

Answer 1

對於第一個a，您可以使用>或直接子選擇器，對於其他人，您可以使用parentClass - >a

.current_page_ancestor > a { 
 
    color: black; 
 
} 
 
.page_item a { 
 
    color: green; 
 
} 
 
.page_item.current_page_item a { 
 
    color: red; 
 
}

<div id="sidebar" class="widget-area"> 
 
    <div class="theiaStickySidebar"> 
 
    <aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu"> 
 
     <ul class="parent-sidebar-menu"> 
 
     <li class="current_page_ancestor"> 
 
      <a href="http://somesite/about-us/">About Us</a> 
 
      <ul class="child-sidebar-menu"> 
 
      <li class="page_item"> 
 
       <a href="http://somesite/about-us/welcome/">Welcome</a> 
 
      </li> 
 
      <li class="page_item current_page_item"> 
 
       <a href="http://somesite/about-us/mission-and-philosophy/">Mission and philosophy</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </aside> 
 
    </div>

Answer 2

ul { 
 
    /* reset lists */ 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
ul li a { 
 
    text-decoration: none; 
 
} 
 

 

 

 
/* specific styles */ 
 

 
.page_item a { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    border-bottom: 1px solid white; 
 
    color: white; 
 
    background-color: #333; 
 
} 
 
.page_item a:hover, 
 
.page_item.current_page_item a{ 
 
    background-color: #666; 
 
} 
 

 
.parent-sidebar-menu { 
 
    width: 200px; 
 
} 
 

 
.current_page_ancestor > a { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    color: green; 
 
    background-color: #fff; 
 
    text-align: right; 
 
} 
 

 
.current_page_ancestor > a:before { 
 
    content: "Back to >> "; 
 
    font-size: 14px; 
 
    color: #000; 
 
    margin-right: 10px; 
 
}

<div id="sidebar" class="widget-area"> 
 
    <div class="theiaStickySidebar"> 
 
    <aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu"> 
 
     <ul class="parent-sidebar-menu"> 
 
     <li class="current_page_ancestor"> 
 
      <a href="http://somesite/about-us/">About Us</a> 
 
      <ul class="child-sidebar-menu"> 
 
      <li class="page_item"> 
 
       <a href="http://somesite/about-us/welcome/">Welcome</a> 
 
      </li> 
 
      <li class="page_item current_page_item"> 
 
       <a href="http://somesite/about-us/mission-and-philosophy/">Mission and philosophy</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </aside> 
 
    </div> 
 
</div> <!-- #sidebar -->

這是代替使用每一個類做不同的事情，我使用類似的事情做同樣的事情，以及基於狀態略有不同更改。祖先頁面的細節與子欄邊欄菜單不同。希望這可以幫助。