Question

我在WordPress网站上有一个包含4个项目的菜单 - 家 - 投资组合 - 团队 - 连接

我想要突出显示当前页面的菜单项，但每个页面应该有不同的颜色。例如，如果我访问主页，则主菜单项应为绿色。

如果我访问投资组合页面，则投资组合菜单项应为绿色。

Answer 1

你可以像这样使用

ul li.active:first-child {
  color:blue;
}

ul li.active:nth-child(2) {
    color: red;
}


ul li.active:nth-child(3) {
    color: green;
}

Answer 2

我找到了解决方案。由于主题基于Twitter Bootstrap，因此.active类被添加到当前页面的被访问菜单项中。因此，我为主页添加了一个单独的类，如.home，将.portfolio添加到组合页面，然后链接类以使其生效。

.navbar-nav > .home.active > a {
    color: green !important;
}

请注意.home.active类是链接的。

关于SO的关注线程很有帮助。