覆盖内联 css

Question

我正在使用的 WordPress 主题在 header 中有一些内联 css，我想要更改的其中一件事是 header top/bottom 填充。在内联 css 中，它列为：

    <head>
    ...
        <style type="text/css" data-type="vc_custom-css">
        #site-header:not(.shrink) .site-title { padding: 60px 0 !important; }
        </style>
    </head>

<body class="home page page-id-24236 page-child parent-pageid-5 page-template-default logged-in admin-bar wpb-js-composer js-comp-ver-4.12.1 vc_responsive customize-support">
    <div id="page" class="layout-fullwidth">
        <div id="site-header-wrapper">
            <header id="site-header" class="site-header" role="banner">
                <div class="container container-fullwidth">
                <div class="header-main logo-position-left header-layout-fullwidth header-style-3">
                <div class="site-title">                                
                    <h1><a href="#" rel="home"></h1>    
                </div>
                </div>
                </div>
            </header>
        </div>
    </div>
</body>

显然，#site-header:not(.shrink) .site-title {... !important} 在我的 styles.css.

我已经尝试了以下方法，但仍然无效：

[style]#site-header:not(.shrink).site-title { padding: 1px 0 !important; }

如何让它覆盖？

Answer 1

尝试为您的规则添加更具体的内容，例如：

body .anotherParentClass #site-header:not(.shrink).site-title { padding: 1px 0 !important; }

Example: https://jsfiddle.net/robsilva/wx113Lxo/

Answer 2

您忘记了 .site-title 和 :not 部分之间的 space。试试这个：

#site-header:not(.shrink) .site-title { padding: 1px 0 !important; }

Answer 3

不是来自样式表的样式块很糟糕。当主题开发人员将它们放入他们的主题时，我真的很鄙视它。唯一更糟糕的是内联样式（即<div style="padding: 5px !important;">）。这些几乎是不可能克服的。

对于您的情况，有一些非常巧妙的方法可以解决这个棘手的问题。

在您的子主题的 functions.php 文件中，您可以使用以下（公认的 hacky）解决方案：

// We're adding a HIGH priority of 9999 which should cause this to be output AFTER the theme's bad styles.
add_action('wp_head', 'fix_bad_theme_styles', 9999);

function fix_bad_theme_styles() { ?>
    <style type="text/css" data-type="vc_custom-css">
            #site-header:not(.shrink) .site-title { padding: 1px 0 !important; }
    </style>
<?php }

如果这不起作用，一个更 hackier 的方法是将样式放在页脚中。它会起作用，但它不是最佳实践（好像这个解决方案中的任何一个都是！）：

add_action('wp_footer', 'fix_bad_theme_styles');

Answer 4

如果您已经在使用子主题，您可以覆盖特定文件，例如footer.php

所以你会在同一个目录下创建一个同名的文件，然后复制你需要的代码

覆盖内联 css

Override inline css

css

wordpress

content-management-system