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类的元素
【WordPress中每个活动菜单项的颜色不同】CSS选择器适用于具有两个类的元素