css - 覆盖 CSS 悬停颜色和 !Important

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 正在呈现网站其余部分的背景颜色悬停。如果我 !important 页面模板的 css，那么站点的其余部分将采用着色效果，而不管它自己的 !important 样式。

我已经尝试从两者中删除 !important postscript，交换任何一个，然后将其添加到两者，但我仍然无法得到它们自行行动。我希望指定 .page-template-cryptofact-page-php 就足够了，因为对于所有其他样式来说它似乎就足够了。

当我打开检查源代码中的元素时，所有 .header-menu 或 .page-template-etc 都变灰，留下 a:hover 作为这两个问题的始作俑者。

我对 CSS 的细微差别相当陌生，所以如果有人能解释为什么会发生这种情况，我将不胜感激。

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

这里我放了几张图片:

Answer 1

我在这里对你的问题做了一些假设，因为我不是 100% 确定你发生了什么，但我相信你误用了 , 在你的选择器中。

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

.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 可能是个好主意……它们通常会使事情更难维护。