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。

因此，在上面的例子中，我们将查看＆＃34; Subitem 2＆＃34;页面，所以＆＃34;菜单项1＆＃34;给予班级active-parent。

我正在尝试仅更改active-parent的字体颜色 - 而不是所有子菜单元素。这就是我所拥有的：

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

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

更改ul项的CSS字体颜色

3 个答案: