Question

我正在使用的WordPress主题在标题中有一些内联css，我想要改变的一件事是标题顶部/底部填充。在内联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

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

在你的情况下，有一些克服这个hacky问题的黑客方法。

在您的子主题的functions.php文件中，您可以使用以下（Admittedly 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 }

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

add_action('wp_footer', 'fix_bad_theme_styles');

Answer 2

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

因此，您将在同一目录中创建一个同名文件，并复制您需要的代码

Answer 3

尝试为您的规则添加更多特异性，例如：

body .anotherParentClass＃site-header：not（.shrink）.site-title {padding：1px 0！important; }

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

Answer 4

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

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

覆盖内联css

4 个答案: