如何覆盖背景颜色：#000000 !important; [复制]答案

【问题标题】：how to overide background-color: #000000 !important; [duplicate]如何覆盖背景颜色：#000000 !important; [复制]
【发布时间】：2021-04-15 17:19:09
【问题描述】：

我想覆盖 WordPress 项目上的 background-color: black !important 属性或删除该属性，但在我的 CSS 文件中找不到它。

#top-nav > div > ul > li.current-menu-item, #top-nav > div > div > ul > li.current-menu-item, #top-nav > div > ul > li:hover, #top-nav > div > div > ul > li:hover, .top-nav-list > li > ul li:hover, .top-nav-list ul li ul li:hover {
    background-color: #000000 !important;
}

【问题讨论】：

标签： css wordpress

【解决方案1】：

想办法在您尝试覆盖的规则之后包含您想要的规则。

根据定义，CSS 是层叠样式表。也就是说下面的代码：

.divwhatever { background-color: black; } // On WordPress Original File
.divwhatever { background-color: white; } // On WordPress Theme File
.divwhatever { background-color: red !important; } // On WordPress Child Theme
.divwhatever { background-color: orange ! important; } // On a specific File

最后会呈现橙色背景。

除非有先前的!important 规则，否则始终应用最后处理的规则。

在这种情况下，最后处理的带有!important 修饰符的规则将优先。

这是一个非常糟糕的做法：理想情况下，您应该找到原始规则并更改它，或者至少对于同一个 DOM 模型只有一个 !important 语句，但我知道WordPress 主题对初学者来说有多难:)

【讨论】：

【解决方案2】：

你可以通过创建 mixin 来覆盖 .test{background:red !important;} @mixin test{.test{background: blue !important;} }@include test();

【讨论】：