WordPress中每个活动菜单项的颜色不同

我在WordPress网站上有一个包含4个项目的菜单-主页-作品集-团队-连接

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

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

#1

你可以这样使用

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

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


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

#2

我找到了解决方案。由于主题基于Twitter Bootstrap, 因此将.active类添加到要访问的当前页面的菜单项中。因此, 我为主页添加了.home之类的独立类, 向投资组合页面添加了.portfolio的类, 然后将这些类链接起来以使其生效。

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

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

在SO上关注线程很有帮助。

CSS选择2类的元素

CSS选择器适用于具有两个类的元素