被内部css覆盖的WordPress自定义css文件

时间:2018-05-14 作者:Ramesh

我已经开始将我的静态页面转换为WordPress主题。当我这样做的时候,我有一个地方,一个部分的背景图像的位置必须用如下值设置background-position:0 80%;.

当我将CSS添加到我的自定义CSS文件时,它是主CSS文件。css我发现有一个内部css覆盖了我的cssbackground-postion:center !important.

然后我将CSS更改为background-position:0 80%; !important

但它仍然不起作用,我发现我的CSS文件包含在头部的内部CSS之前(by view page source code).

现在我想知道的是如何更改顺序或如何导入自定义CSS(main.css) 内部CSS代码之后的文件?

2 个回复
最合适的回答,由SO网友:D. Dan 整理而成

首先应该是:background-position:0 80% !important;您说过此样式应用于节。怎样如果只是添加另一个选择器,例如使用:

article{
background-position:0 80% !important;
}
使用:

body article{
background-position:0 80% !important;
}
它可能只是工作没有任何黑客。

SO网友:Dharmishtha Patel

不是来自样式表的样式块很臭。我真的很鄙视主题开发者把它们放在他们的主题中。唯一糟糕的是内联样式(ie)。这些几乎是不可能克服的。

在您的情况下,有几种黑客风格的方法可以克服这个黑客问题。

在子主题的函数中。php文件,您可以使用以下(公认的黑客)解决方案:

//我们正在添加一个高优先级9999,这应该会导致在主题的糟糕样式之后输出。

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

结束