Question

我正在使用Wordpress，我试图让我的导航显示为该主动导航链接的颜色IE在主页选择主页时在家中显示蓝色链接，在服务页面点击时显示服务页面上的红色链接。

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

Answer 1

您可以同时定位ID和类同时处于活动状态的div：

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

作为旁注，请避免在使用ID时使用li，例如：

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

因为你只是放慢速度（ID已经是唯一的，因此不需要指定li）。

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

1 个答案: