进入该页面后，每个菜单项的颜色都不同

Question

<li id="menu-item-1769" class="Par menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1769"><a href="http://wp.thecmr.com/parents/">Parents</a></li>

所以，我在 WordPress 中有该代码，它是我菜单中的一个选项。一旦我进入“父”页面，我想要做什么来使颜色不同。

例如，当我点击菜单“父母”时，我将转到父母页面，但我希望“父母按钮”为红色，直到我离开父母页面。

对 CSS 有什么建议吗？

Answer 1

我相信你在这里问两件事。

1. 您希望活动菜单项以某种颜色显示。
2. 您希望每个菜单项的颜色都是唯一的。

让我们分别处理每项任务，它可以帮助您更好地了解需要什么。

1. 为了使活动菜单项的颜色与标准黑色不同，我们必须对其活动类应用样式。 根据您使用的主题，这可能会有所不同，如果您检查当前的元素并将其与其他链接元素进行比较，您将能够找出您要定位的类名称。 在我的示例中，主题使用了一个名为 current-menu-item 的类。

   让我们为这个类创建一个样式

   // CSS .当前菜单项{ 红色; }

现在您可以看到我们如何设置活动类的样式，下一步我们将为每个菜单项制作独特的颜色。

1. 这是一个非常简单的过程，可以通过多种方式完成，您可以在 Wordpress 菜单中添加一个类，也可以使用自动 id 选择器来定位菜单项。在这个例子中，我可以看到你有 #menu-item-1769 的自动 id 选择器，所以让我们使用它。

   // css
   #menu-item-1769 .current-menu-item {
       color: red;
   }
   

   为了帮助说明这一点，我假设您还有一些菜单项，让我们为它们应用颜色。

   // css
   #menu-item-1769.current-menu-item {
       color: red;
   }
   #menu-item-1770.current-menu-item {
       color: pink;
   }
   #menu-item-1771.current-menu-item {
       color: green;
   }
   
   // Depending on the theme you may have to target a child selector
   // In this case the following may be suitable
   #menu-item-1769.current-menu-item a {
       color: red;
   }
   

这应该足以让您入门，如果您需要更多帮助，请告诉我。

祝你有美好的一天

Answer 2

您还应该能够从您的每个页面获取页面 ID。

所以继续写你的css文件：

#page-id-1234 #menu-item-1769 {background-color: red;}
#page-id-1235 #menu-item-1770 {background-color: blue;}
#page-id-1236 #menu-item-1771 {background-color: yellow;}