更改ul项目的CSS字体颜色

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的字体颜色，而不是所有的子菜单元素。这就是我所拥有的：

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

问题是，这不仅改变了active-parent元素，还改变了子菜单中的所有li。

如何将其更改为仅更改标记为active-parent的特定元素的字体颜色

Answer 1

这种行为在CSS中是可以预料到的。为子元素覆盖该样式的唯一方法是对这些元素使用单独的(更具体的)样式：

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

Answer 2

尝试将active-parent类放在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;
}

这只会影响li元素的直系后代。