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

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
       .current-menu-item {
         color: red;
       }
       

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

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;}