css - 显示多个元素的 .current_menu_item css 的导航菜单

Question

相关网站是 www.valuetactics.com

我想让当前页面的菜单项链接加粗，黄色。如果子页面是事件页面，则子链接项和父链接项都应为粗体和黄色。

目前主页上有多个黄色菜单项，而应该只是“主页”链接。我试过用

改变颜色

.main-navigation .current-menu-item > a{
color: yellow;
font-weight: bold;
}

.main-navigation .current-menu-ancestor > a{
color: white;
font-weight: bold;
}

 .main-navigation .current_page_ancestor > a {
color: green;
font-weight: bold;
}

我从默认扩展:

    .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a {
    color: yellow;
    font-weight: bold;
}

我发现 .main-navigation .current-menu-item 控制当前页面的链接颜色，但我不明白为什么这也会影响所有其他具有子菜单项的菜单项。

这是 wordpress 上“twentytwelve”的子主题。

Answer 1

问题不在于您的 CSS。您有多个指向主页的顶级菜单项，因此 WordPress 应用程序也将 .current-menu-item 应用于这些菜单项。这是预期的适当行为。

将这些顶级菜单项更改为静态占位符，或将它们指向其中一个子项页面。