css menu - 活动主菜单项答案

【问题标题】：css menu - active main menu itemcss menu - 活动主菜单项
【发布时间】：2011-10-24 04:10:12
【问题描述】：

我正在使用 WPML 包提供的 CSS 菜单。

我想让活动的主菜单项在活动时保持蓝色。

我过去所做的是将颜色应用于 .li selected_page

问题是所有子菜单项也都应用了这个标签，这意味着在大多数浏览器中（奇怪的是不是当前的 firefox）只要它处于活动状态，包括子菜单项在内的所有菜单项都是蓝色的。

有没有人看到一种方法可以将蓝色应用于活动的主菜单项，以便在单击它时保持蓝色？谢谢！

-EDIT- 在所有帮助之后：通常解决方案是您所有帮助的总和 :) 我最终使用以下代码完成了它：

#menu-wrap li.selected_page a { color: #1983AF; } 
#menu-wrap ul li.selected_page ul>li>a { color: #000; }
#menu-wrap ul li.selected_page ul>li>a:hover { color: #1983AF};

【问题讨论】：

感谢您的所有回答！通过使用：#menu-wrap ul li.selected_page a { 颜色：#1983AF;我可以改变菜单项的颜色。然而，问题是它也会改变每个子菜单项的颜色。我喜欢 :first-child 的想法，但是我无法让它发挥作用。我试图以我能想到的各种方式应用它，但我得到的唯一结果是全黑或全蓝...... :(
更新了我的答案以修复该位。希望这可以帮助！ :)

标签： css wordpress menu

【解决方案1】：

试试 ">" CSS 选择器，比如 "#cms-nav-top-menu > li.selected_page {color: blue;}"

但是，这不适用于旧浏览器。

见http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

【讨论】：

【解决方案2】：

li.selected_page a:first-child
{
    color:#1983AF;
}

CSS2

【讨论】：

我觉得这应该有效，但它没有:(如果我按照你的建议应用它，一切都保持黑色，如果我将它应用到“li.selected_page a:first-child”那么一切都变蓝了..我不明白为什么
@j00ls 哈哈。确切的规范是 "E:first-child 一个 E 元素，其父元素的第一个子元素"。所以这是有道理的。它不是节点的第一个孩子，但如果节点是第一个孩子。
我昨天尝试了 a:first-child 的想法（我查了一下），但没有帮助。不过，这仍然是一个很好的提示，我可能会在将来的某个时间使用它。 :)

【解决方案3】：

我认为问题在于继承——你的风格

#menu-wrap li.selected_page {
    color: #1983AF;
}

被覆盖

#menu-wrap ul a {
    color: #333333;
}

尝试将第一个示例更新为：

#menu-wrap ul li.selected_page a {
    color: #1983AF;
}

这应该强制它在 CSS 中优先。希望这可以帮助！祝你好运。

根据评论进行编辑：

要使子项显示为蓝色，请添加以下内容 - 将 #000 更改为您想要的任何颜色：

#menu-wrap ul li.selected_page a ul a {
    color: #000;
}

如果您想为选定的子项使用不同的颜色，只需将颜色添加到此选择器（已经在您的样式表中）：

#menu-wrap li.selected_subpage

祝你好运！

【讨论】：