Question

这是我想要复制的内容：在brit.co上，单击菜单项，文本和图标从白色变为黑色。在WordPress中，我可以将current-menu-item设置为ONE图标，以便每个活动页面上都显示ONE图标，但不能在每个页面上显示不同的图标，如brit.co所示< / p>

显示的代码有效，但同样，每个页面上的活动图标都相同。 “current-page-item”不符合我为每个菜单页面设置的样式。我从未在WP中看到过这种情况，也许不能仅通过CSS。

#access .menu-style-page-1 a {
background:url('/wp-content/uploads/2012/10/menu-1-white-icon.png') no-repeat 0.5em 0.5em transparent;
padding:0 1.2125em 0 2.2em;
}
#access .menu-style-page-2 a {
background:url('/wp-content/uploads/2012/10/menu-2-white-icon.png') no-repeat 0.5em 0.5em transparent;
padding:0 1.2125em 0 2.2em;
}
/*** current_page_item styles are below ***/
#access .menu-style-page-1 .menu_bar .current_page_item > a, .menu_bar .current-menu-item > a, .menu_bar .current_page_ancestor > a {
background:url('/wp-content/uploads/2012/10/menu-1-black-icon.png') no-repeat 0.5em 0.5em transparent;
padding:0 1.2125em 0 2.2em;
}

#access .menu-style-page-2 .menu_bar .current_page_item > a, .menu_bar .current-menu-item > a, .menu_bar .current_page_ancestor > a {
background:url('/wp-content/uploads/2012/10/menu-2-black-icon.png') no-repeat 0.5em 0.5em transparent;
padding:0 1.2125em 0 2.2em;
}

Answer 1

如果不直接深入了解你的东西，这很简单。标准菜单类似于

<li id="menu-item-1" class="menu-item menu-item-1"><a></a></li>
<li id="menu-item-2" class="menu-item menu-item-2"><a></a></li>

当您点击某个链接时 - 它会添加一个类current-menu-item

你可以在CSS中做这样的事情

#menu-item-1.current-menu-item { background: #f00; /*red*/ }
#menu-item-2.current-menu-item { background: #0f0; /*green*/ }

另外，在外观中＆gt;菜单设置，您可以单击“屏幕选项”并选中“类”框，然后您可以添加自定义类，这样就可以了

.aboutus.current-menu-item { background: #f00; /*red*/ }
.contactus.current-menu-item { background: #0f0; /*green*/ }

您需要在Appearance＆gt;中为每个菜单项添加一个类。菜单。在你的CSS中，你需要做

.your-class.current-menu-item { background-image: icon1.png no-repeat; }
.other-class.current-menu-item { background-image: icon2.png no-repeat; }

在上面的例子中，单独的.current-menu-item永远不会有背景图片，只要它有另一个类。

如果它被覆盖，则意味着你有以下内容：

.your-class.current-menu-item { background-image: icon1.png no-repeat; }
.current-menu-item { background-image: BADicon.png no-repeat !important; }

上面的代码不起作用，因为.current-menu-item的“CASCADING”样式表规则会覆盖上面的各个样式。（而！重要的是帮助它覆盖）。

如果您删除了个人.current-menu-item的任何实例，并且只执行.your-class.current-menu-item 将工作。

Answer 2

解决。将无法使用current-menu-item，因为后续条目覆盖，假设设计，并且看起来必须修改php。

解决方案很简单：使用菜单ID添加一个样式，使用页面ID添加每页样式，因此：

菜单： li＃menu-item-26 a {background：url（'whiteicon.png'）no-repeat; left-padding：2em}

菜单如何显示每页： .page-id-2 li＃menu-item-26 {background：url（'blackicon.png'）no-repeat; left-padding：2em}

样式WordPress中每个页面的不同当前页面菜单项

2 个答案: