html - 如何使具有自己类的<a>元素与其他元素具有不同的颜色？

抱歉，我的标题不够严格。我不确定如何用几个词来形容标题。

背景

我正在自定义wordpress.com模板。

它是以下站点：http://chaine-charlotte.org/donate/

我在DONATE菜单项周围放了一个金色框（使用填充）。但是我现在遇到的问题是，无论是处于非活动状态还是处于活动状态，都需要更改该项目的字体颜色。

我已将CSS类.donate应用到donate菜单项，因此可以将自定义CSS应用于它。

我要做什么

我一直在尝试使用Firebug以及Web开发人员工具（Firefox附加组件）来标识我需要修改哪些选择器以更改字体颜色。我找到了它们，但无法弄清楚如何仅在DONATE菜单项上更改颜色（当前和非当前<a>）。

据我所知，将颜色应用于所有菜单项中当前/活动菜单项的CSS是：

.main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
color: #C39738;
}

影响非活动/非当前菜单项的代码是：

.main-navigation a {
border-bottom: medium none;
color: #FFF;
...
}

我可以通过添加.main-navigation .donate a声明来更改该代码。

题

所以我的问题是，如何更改此选择器，使其具有仅适用于.donate类的版本？

.main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
color: #C39738;
}

最佳答案

捐赠类将添加到LI元素。因此，您可以执行此操作。

如果页面或其子页面处于活动状态，则：

.main-navigation li.donate.current_page_item > a, .main-navigation li.donate.current-menu-item > a, .main-navigation li.donate.current_page_ancestor > a, .main-navigation li.donate.current-menu-ancestor > a {
color: #C39738;
}

如果页面不活动：

.main-navigation li.donate a {
border-bottom: medium none;
color: #FFF;
}

关于html - 如何使具有自己类的<a>元素与其他元素具有不同的颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36396374/