css - WordPress导航菜单颜色，每个选定页面的更改

Question

我正在使用Wordpress，并且试图让我的导航显示该 Activity 导航链接的颜色，即当选择主页时在主页上显示蓝色链接，在单击服务页面时在服务页面上显示红色链接。

我正在尝试使用CSS做到这一点。导航代码如下:

<div id="menu-secondary" class="site-navigation menu-container" role="navigation">
<span class="menu-toggle">Menu</span>
<div class="wrap">
<div class="menu">
<ul id="menu-secondary-items" class="nav-menu sf-js-enabled">
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21">
<a href="http://whenthecatsaway.co.nz/">Home</a>
</li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20">
<a href="http://whenthecatsaway.co.nz/?page_id=6">Welcome</a>
</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
<a href="http://whenthecatsaway.co.nz/?page_id=8">Services</a>
</li>

这是CSS，可使每个当前的 Activity 链接变为黄色。

#menu-secondary li.current-menu-item a {
  color: #FFCC33;
}

但我希望每个页面显示不同的颜色。

我在想像这样的东西，但它不起作用

#menu-secondary li. menu-item-18{
    color: #0F0;
}

Answer 1

您可以同时定位具有有效ID和Class的div，如下所示:

#menu-secondary #menu-item-18.current-menu-item a{
    color: #0F0;
}

附带说明，在使用ID时，避免在开始时使用li，例如:

li.#menu-item-18.current-menu-item

因为您只是在放慢速度(ID已经是唯一的，因此不需要指定li)。