Вложенные списки CSS overriding styling (#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 код, который вы будете использовать, чтобы изменить цвет фона каждой Li/элемент, принадлежащий к классу 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 -->

Это немного отличается тем, что вместо того, чтобы использовать каждый класс, чтобы сделать что-то другое, я использую подобные вещи, чтобы сделать то же самое, и изменения на основе состояния изменение. Страница предков работает по-другому, чем меню дочерней боковой панели. Надеюсь это поможет.