Html 更改ul项目的CSS字体颜色

我有这样的菜单：

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

问题是，这不仅改变了

活动父元素

元素，而且也改变了子菜单中的所有li元素

---

如何将此更改为仅更改标记为

活动父级的特定元素的字体颜色？
CSS预期的行为。为子元素替代该样式的唯一方法是为这些元素使用单独（且更具体）的样式：

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

这种行为是CSS所期望的。为子元素替代该样式的唯一方法是为这些元素使用单独（且更具体）的样式：

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

尝试将活动父类放在HREF上：











​
ul.ipro_菜单a.主动-父级{
颜色：#FF0000；
}​
尝试将活动父类放在HREF上：











​
ul.ipro_菜单a.主动-父级{
颜色：#FF0000；
}​
使用直接子项选择器：

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

这只会影响li元素的直接子元素。
使用直接子元素选择器：

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

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