WordPress如何覆盖带!important标记的动态生成内联CSS样式？

开发者阿泽

2026-9-30

方案1：优先使用更高优先级CSS解决（更推荐，性能更好）

同权重选择器下，后加载的!important规则会覆盖先加载的规则，你可以用两种方式提升你写的CSS优先级：

提升选择器权重，给原有选择器前缀加标签选择器抬升权重，修改后的CSS如下：

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

将上述CSS添加到WordPress后台「外观」-「自定义」-「额外CSS」面板中，该面板输出的CSS默认在页面头部最后加载，优先级远高于主题、插件动态生成的内联样式，相同规则下会自动覆盖原有!important设置。

方案2：JavaScript覆盖方案

如果动态生成的内联样式是在页面加载完成后才插入的，CSS方案失效时可以用JS强制覆盖，代码如下：

document.addEventListener('DOMContentLoaded', function() {
  const targetMenu = document.querySelector('.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu');
  if(targetMenu) {
    // 第三个参数指定!important标记
    targetMenu.style.setProperty('background-color', 'rgba(10,14,13,0.9)', 'important');
  }
});

WordPress中添加上述JS的三个常用路径：

若你的主题支持自定义JS设置，直接将代码粘贴到主题自定义面板的JS输入框中即可
用子主题的functions.php文件挂载脚本到页尾，插入代码如下：

// 自定义移动端菜单样式脚本
add_action('wp_footer', function() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const targetMenu = document.querySelector('.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu');
  if(targetMenu) {
    targetMenu.style.setProperty('background-color', 'rgba(10,14,13,0.9)', 'important');
  }
});
</script>
<?php
}, 999);

优先级参数999确保脚本在所有其他脚本加载完成后执行，能命中动态生成的菜单元素。