html - 更改 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.

因此，在上面的示例中，我们将查看“Subitem 2”页面，因此“Menu Item 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;
}