我使用CSS将鼠标悬停在按钮上时,试图使按钮中的文本更改颜色

我有一个wordpress网站, 并且在标题菜单中有一个按钮, 称为” 以商人身份加入” 。
http://prntscr.com/px7mdt
它具有绿色边框和白色背景, 文本为黑色。
我希望将鼠标悬停在按钮的背景上时, 将其背景更改为绿色(颜色:#25ad00), 并将文本更改为白色(颜色:#fff)。
我已将以下代码添加到自定义css仪表板:

body #menu-item-1847 a{ color:#000; } #menu-item-1847 a{ font-weight: 700; border: 2px solid #25ad00; border-radius: 5px; padding: 2px 20px } #menu-item-1847 a:hover { color: #fff; background-color: #25ad00; }

… 但是现在当我将鼠标悬停在按钮上时, 背景变为绿色, 但文本仍为黑色:
http://prntscr.com/px7o9u
我当时正在徘徊代码的问题所在, 因为我认为
#menu-item-1847 a:hover { color: #fff;

… 将鼠标悬停在文本上时, 会将文本的颜色更改为白色吗?
谢谢
#1这与你的DOM的CSS特定性有关, 你可以使代码正常工作而无需添加!important。
【我使用CSS将鼠标悬停在按钮上时,试图使按钮中的文本更改颜色】只需增加CSS的特异性即可。 (分享你的HTML, 我将通过CSS特定性向你解释)
请阅读有关CSS特异性的信息。使用!important不是一个好习惯。这不是干净的代码。浏览这些文章。
不要使用!important来提高CSS的特殊性使用!important是正确的选择吗?
#2要覆盖现有CSS, 请添加!important, 如下所示:
#menu-item-1847 a:hover { color: #fff!important; background-color: #25ad00!important; }

#3你可以像这样使用!important语句。 (如果你正确指定了选择器, 否则请仔细检查选择器#menu-item-1847)
#menu-item-1847 a:hover { color: #fff!important; }

这意味着, 类似于:
如果周围没有其他重要的事情, 请使用我!

    推荐阅读