html - 我怎样才能使一个 元素具有自己的类别，颜色与其他元素不同？

Question

抱歉，如果我的标题不够精确。我不确定如何用几句话来描述这个标题。

背景

我正在定制一个 wordpress.com 模板。

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

我在 DONATE 菜单项周围放了一个金色框(使用填充)。但我现在遇到的问题是，我需要更改该元素的字体颜色，无论是处于非事件状态还是事件状态。

我已将 CSS 类 .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 的版本类(class)？

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

Answer 1

donate 类被添加到 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;
}