覆盖CSS悬停颜色和！重要

我正在使用WordPress，并且我有一部分网站的颜色和样式像通常一样，但是网站的辅助部分以较暗的样式着色。我已经能够将这两个CSS分离出来，主要是使用类和！重要的。我在菜单区域遇到了麻烦。覆盖CSS悬停颜色和！重要

在大多数的网站我已经悬停在菜单时，以下几点：

.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，然后网站的其余部分采取着色效果，而不管它自己！重要的风格。

我试过去除两个！重要的后记，交换一方，并将其添加到两个，我仍然不能让他们单独行动。我希望指定.page-template-cryptofact-page-php就足够了，因为它似乎足以满足所有其他样式。

当我打开来检查源代码中的元素时，无论是.header菜单还是.page-template-etc都灰显了，留下a：hover作为任何问题的煽动者。

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

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

在这里，我已经把一对夫妇的图片：

来源

2015-11-17 Nimara

我不明白你想达到什么。你能告诉我们你的HTML吗？我们可以有一个片段吗？ – Siyah

你真的必须清理你的风格。删除所有的重要和简化你的选择器和类。用更乱的代码修复凌乱的代码并不会帮助任何人。 –

感谢雷德蒙先生的建议，但直到我开始尝试让网站的任何一部分分离其CSS为止，感觉都很干净。你认为这是唯一的问题，其他地方的其他地方还有别的东西妨碍了它的发展？ – Nimara

我做了一下一个假设的人，此间你的问题是什么，因为我不是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 s可能是一个好主意......他们通常会使事情变得更加难以维护。

来源

2015-11-17 16:00:14

呃，你完全正确。对不起，我可能一直在看它太久（从昨晚开始）。感谢您进一步解释逗号的使用。我现在肯定会去测试一下。 – Nimara

我改变了它，它确实工作！非常感谢。我对CSS的逗号部分知之甚少，实际上是在滥用它。我会回过头来看看我的CSS，以确保它完成正确。感谢您帮助我学习更多！ – Nimara

覆盖CSS悬停颜色和！重要

回答

相关问题