Question

我的网站有一个奇怪的问题。我正在研究site

并希望将主菜单悬停链接从白色更改为橙色。这是该部分的CSS：

.darkheader .navigation > ul > li.menu-item:hover > a.menu-link,
.darkheader .navigation > ul > li.menu-item.menu-item-has-children:hover > a.menu-link 
{
color: #fff !important;

我想将悬停更改为白色，并尝试使用橙色覆盖白色。我插入了以下CSS：

.darkheader .navigation > ul > li.menu-item:hover > a.menu-link,
.darkheader .navigation > ul > li.menu-item.menu-item-has-children:hover > a.menu-link 
{
color: #f06623 !important;

但是在重新加载页面后，链接上的悬停仍然是白色的。我想知道为什么白色不会被橙色覆盖。我知道最后一个带有！important规则的CSS是最后一个，并在放置之前覆盖所有。我试图在主题CSS文件中找到CSS行，但无法找到它。有人帮助我如何改变悬停橙色？

Answer 1

您可以将diab替换为您的父元素或switch或enum

nav

Answer 2

CSS在程序上执行。要覆盖!important css规则，只需在带有!important标志的CSS文件中进一步定义另一个css规则。

// First we set the color to blue    
.div1 {
    background-color: blue !important;
}
// The background color is changed to green
.div1 {
    background-color: green !important;
}
// The backgorund color is NOT changed to red, due to the !important flag above.
.div1 {
    background-color: red;
}

Answer 3

如果您有权访问html，添加ID，则会增加特异性。但是如果您没有访问html，请尝试通过此代码段覆盖特异性：

.darkheader .navigation > ul > li.menu-item:hover > a.menu-link..menu-link,
.darkheader .navigation > ul > li.menu-item.menu-item-has-children:hover > a.menu-link.menu-link 
{
color: #f06623 !important;

如何在我的网站中覆盖“！important”？

3 个答案: