我有一个这样的菜单:
<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
的特定元素的字体颜色?
最佳答案
这种行为是 CSS 所期望的。为子元素覆盖该样式的唯一方法是为这些元素使用单独的(且更具体的)样式:
ul.ipro_menu li.active-parent ul.sub-menu li a {
color:#000;
}
关于html - 更改 ul 元素的 CSS 字体颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11396840/