覆盖CSS悬停颜色和！重要

Question

我在WordPress工作，我有一部分网站的颜色和样式正常，但网站的次要部分以深色调着色。我已经能够将两个CSS分开，主要是使用类和！important。我在菜单区域遇到了麻烦。

在鼠标的大部分位置，我将鼠标悬停在菜单上时有以下内容：

.header-menu li:hover, a:hover {
background-color: #b89230 !important;
color:#fff4d6;
text-decoration: none !important;

我在网站的哪个部分：

.page-template-cryptofact-page-php .header-menu li:hover, a:hover {
background-color: #836F38;
}

如上所述，.page-template css采用了网站其余部分的背景颜色悬停。如果我！重要的是页面模板的CSS，那么网站的其余部分将采用着色效果，而不管它自己的重要样式。

我已经尝试过删除！重要的postscript，交换其中一个，并且添加两者，我仍然无法获取它们自己行动。我希望指定.page-template-cryptofact-page-php就足够了，因为它似乎足以用于所有其他样式。

当我打开来检查源代码中的元素时，所有.header-menu或.page-template-etc.都显示为灰色，留下a：hover作为任何一个问题的发起人。

我对CSS的细微差别相当新，所以如果有人能解释为什么会这样，我会非常感激。

我会发布该网站，但它不安全，所以这不是一个好主意。我可以发布你需要的截图或任何其他信息。

我在这里放了几张图片：

Answer 1

我在这里做了一个关于你的问题的假设，因为我不是百分之百确定你发生了什么，但我相信你错误地使用了,在您的选择器中。

逗号分解完全不同的选择器，所以如果你想在某个类下设置某些元素的样式，你需要在逗号的两边包含该类，所以你应该得到这样的结果：

.header-menu li:hover, .header-menu a:hover {
    background-color: #b89230;
    color:#fff4d6;
    text-decoration: none;
}

.page-template-cryptofact-page-php .header-menu li:hover,
.page-template-cryptofact-page-php .header-menu a:hover {
    background-color: #836F38;
}

删除!important可能是一个好主意......它们通常会使维护更加困难。