Wordpress 导航菜单颜色，每个所选页面的更改答案

【问题标题】：Wordpress navigation menu color, changes for each chosen pageWordpress 导航菜单颜色，每个所选页面的更改
【发布时间】：2013-11-01 03:58:11
【问题描述】：

我正在使用 Wordpress，我正在尝试让我的导航显示该活动导航链接的颜色，即选择主页时主页上的蓝色链接和点击服务页面时服务页面上的红色链接。

我正在尝试使用 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。

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

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

我正在考虑这样的事情，但它不起作用

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

【问题讨论】：

好吧，我可以告诉你“li”。没有多大意义。一个句点 before 一个名字意味着一个类选择器，但我认为它之后没有任何意义。试着摆脱空间，看看你在哪里。
试过了，好像不行。您将如何进行此操作-单击导航中的服务页面。 -当服务页面处于活动状态时，显示为红色。 - 选择主页时，显示蓝色（此操作关闭服务颜色）
对不起，我上次没有仔细阅读。您需要使用 # 引用菜单项的 ID。例如#menu-item-19 a{颜色：#0F0;}
老实说，我不知道该怎么做，主要是因为我不知道 wordpress 中的所有各种类/ID。也许问一个新问题？我还建议您了解CSS selectors 并学习一个好的开发工具（chrome 开发工具非常棒，而且一点也不难），这样您就可以轻松检查各种类/ID。
@mattnewbie 是的，应该可以。见wordpress.org/support/topic/…。 #header ul.menu li.current-menu-item a { 颜色：#F9B233; }

标签： css wordpress

【解决方案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）。

【讨论】：