2

I'm using Wordpress and i'm trying to have my navigation display a color for that active navigation link IE a blue link on home when home page selected and a red link on services page when services page clicked.

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

1 回答 1

0

您可以同时定位一个 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）。

于 2014-07-25T00:52:22.633 回答