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

这将只会影响你的元素的直接后裔。