覆盖内联 css答案

【问题标题】：Override inline css覆盖内联 css
【发布时间】：2016-11-10 21:32:36
【问题描述】：

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

如何让它覆盖？

【问题讨论】：

你不讨厌内联样式吗？他们真的很臭。我会立即发布答案....

标签： css wordpress content-management-system

【解决方案1】：

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

在您的情况下，有几种 hack-tastic 方法可以克服这个 hacky 问题。

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

// 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');

【讨论】：

你，我的朋友真棒。我已经通过 CSS 尝试了书中的所有内容。
很高兴能帮上忙！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

我尝试了几种不同的方法，但没有运气。我刚刚将模板中的更多代码添加到我的问题中。

【解决方案4】：

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

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

【讨论】：

试过了。不去上班。标题中的内联样式有 !important。