如何使用 !important 值覆盖内联 CSS？答案

【问题标题】：How do I override inline CSS with !important value?如何使用 !important 值覆盖内联 CSS？
【发布时间】：2021-10-14 18:11:47
【问题描述】：

我正在开发一个 WordPress 网站。我想覆盖内联 CSS 规则来设置移动菜单的样式。问题是，内联规则具有 !important 值。我相信内联样式是动态生成的。

内联样式：

.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu{
  background-color: RGBA(0,0,0,0) !important;
}

Inline rule result

这是外部样式

.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu{
  background-color: RGBA(10,14,13,0.9) !important;
  }

External rule result

我读到您可以使用 JavaScript 覆盖内联规则，但不确定在哪里发布 JavaScript 帖子。

非常感谢您的洞察力。

【问题讨论】：

Ew。内联样式 AND 它们是 !important。那一定是一种罪过。应该给这个主题的作者一个耳光。可以用一个足够具体的选择器来覆盖它，但这真的很难看，因为内联样式的特异性为 1000，因此你需要一个非常长的讨厌的选择器。您可以使用 element.style.backgroundColor 更改 Javascript 中的内联样式。
确保您的 !important 规则在 wordpress 之后加载...例如，创建您自己的 CSS 文件并在所有 worpdress CSS 之后包含它
ps。它认为你不了解“内联样式”
@David 我应该在代码中的哪个位置放置 Javascript？
@Wordica 我有一个子主题，它有自己的样式表，它在主主题的 CSS 之后加载。由于这里的规则是内联的，它会覆盖我的样式表。

标签： css wordpress

【解决方案1】：

在 Js 中...但是你必须知道如何以及何时在 function.php 中包含 JS

$(window).on("load", function() {

    $(body).find('.et_pb_menu_0_tb_header.et_pb_menu 
                  .et_mobile_menu).removeAttr("style");
    
    $(body).find('.et_pb_menu_0_tb_header.et_pb_menu 
                  .et_mobile_menu).css('background-color',"rgba(10,14,13,0.9)")
});

如果 RGBA 不起作用，只需添加颜色十六进制。

【讨论】：