更改CSS字體顏色UI項目

Question

我有一個菜單，如下所示：

<ul class="ipro_menu"> 

    <li><a href="/">Home</a></li> 
    <li class="active-parent"><a href="/menu-item-1/">Menu Item 1</a> 

     <ul class="sub-menu"> 
      <li><a href="/subitem-1/">Subitem 1</a></li> 
      <li class="active"><a href="/subitem-2/">Subitem 2</a></li> 
     </ul> 

    </li> 
    <li><a href="/menu-item-2/">Menu Item 2</a></li> 

</ul> 

當前頁面自動獲得類active，如果它是在UL主UL（子），下則主ul元素將獲得類active-parent。

因此，在上例中，我們將查看「子項目2」頁面，因此「菜單項目1」被賦予類別active-parent。

我試圖改變的active-parent ONLY-並不是所有的子元素的字體顏色。下面是我有：

ul.ipro_menu li.active-parent a { 
color: #FF0000; 
} 

的問題是，這種情況正在改變，不僅active-parent元素，但所有李時珍在子菜單中也是如此。

如何改變這種只改變特定元素的字體顏色標記active-parent？

Answer 1

這種行爲預期與CSS。只有這樣，才能覆蓋該樣式的兒童是使用這些元素單獨的（和更具體的）風格：

ul.ipro_menu li.active-parent ul.sub-menu li a { 
    color:#000; 
} 

Answer 2

嘗試把有源父類的href：

http://jsfiddle.net/RAkuc/

<ul class="ipro_menu"> 

<li><a href="/">Home</a></li> 
<li><a class="active-parent" href="/menu-item-1/">Menu Item 1</a> 

<ul class="sub-menu"> 
<li><a href="/subitem-1/">Subitem 1</a></li> 
<li class="active"><a href="/subitem-2/">Subitem 2</a></li> 
</ul> 

</li> 
<li><a href="/menu-item-2/">Menu Item 2</a></li> 

</ul> ​ 

ul.ipro_menu a.active-parent { 
color: #FF0000; 
}​ 

Answer 3

使用直接選擇兒童：

ul.ipro_menu li.active-parent > a { 
    color: #FF0000; 
} 

這將只會影響你的元素的直接後裔。