0

我有一个这样的菜单：

<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。

因此，在上面的示例中，我们将查看“Subitem 2”页面，因此“Menu Item 1”被赋予了 class active-parent。

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

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

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

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

4

3 回答 3

4

CSS 会出现这种行为。为子元素覆盖该样式的唯一方法是为这些元素使用单独的（更具体的）样式：

ul.ipro_menu li.active-parent ul.sub-menu li a {
    color:#000;
}
于 2012-07-09T14:18:40.473 回答
1

使用直接子选择器：

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

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

于 2012-07-09T14:25:53.020 回答
1

尝试将 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;
}​
于 2012-07-09T14:19:22.800 回答