有没有一种方法可以使样式表的优先级高于 !important?

3

我知道我不应该问这个问题,但在我被投票到底之前,请听我说一下...我试图从一个非常糟糕的情况中做到最好:

我的客户购买了一个WordPress主题,并雇佣我定制其中的一些部分。所购买的主题是一个子主题,代码很糟糕...主题的样式表试图覆盖woocommerce插件中的某些样式,而woocommerce样式表是在主题样式表之后加载的。为此,它使用了大量的!important声明。我无法真正修复任何这些问题,因为这会破坏主题更新功能。

因此,这是我的计划:我想在最后添加另一个样式表,以覆盖之前的所有混乱。但是,简单地放置它不会覆盖之前样式表中的所有!important声明。所以我想知道是否有一种方法可以将我的样式表优先于之前的混乱。

也欢迎任何将我的优先级提高到!important声明之上的方法!


1
只有使用 inline !important 才能覆盖其他地方定义的 !important 样式规则。即使在后面设置 !important 也无法覆盖它们。但这两个选项都会使您的情况更加混乱。 - m4n0
@AlvaroMenéndez 我担心...该死的!important声明! :/ - Afterlame
你是否考虑过改变样式表的加载顺序,而不是绕开这个问题?如果可以的话,以正确的方式加载它们,并使用简单的搜索/替换来消除 !important 声明。即使进行更新,这个过程也应该可以重复执行,而不会太麻烦。 - Yoshi
1
好的,那么最后一个可能性是,如果该网站不是高频率使用的话,可以通过php文件加载样式表。这样你就可以动态地删除声明。 - Yoshi
1
@Yoshi 你的意思是通过php编辑后,使用<style>内联css?如果我能找到一种在样式表顺序上执行相同操作的方法,那么这可能有效。不幸的是,我不知道如何创建一个grand-child主题,但我会研究一下。也许这将是一个替代方案... - Afterlame
显示剩余5条评论
4个回答

4
您可以选择以下两种方式之一:
  1. 确保您的声明同样具体化,但出现在样式表中的后面:

div p strong {color:red!important}
div p strong {color:blue!important}
<section>
  <div>
    <p>lorem <strong>ipsum</strong></p>
  </div>
</section>

  1. 使你的声明更具体:

section div p strong {color:blue!important}
div p strong {color:red!important}
<section>
  <div>
    <p>lorem <strong>ipsum</strong></p>
  </div>
</section>

请参见:https://css-tricks.com/specifics-on-css-specificity/,其中包含一些有用的提示。


1
从技术上讲,这是正确的,但每个语句后面都需要使用!important,我真的很想避免这样做,至少要保持我的代码尽可能地清晰。 - Afterlame
1
@Afterlame 嗯,你无法控制之前开发人员的错误。我建议清理原始样式表而不要将自己的样式表混在其中。 - Moob
嗯,好的,那么就是这样,或者是我的客户在更新主题时可能会破坏一切。面临两难选择...但是感谢您详细的回答! - Afterlame

2

通常情况下,您可以直接编辑子主题。但是,如果您担心无法获取子主题的更新,您也可以从插件中注销低质量的样式表,并排队使用自己的版本。

<?php
/*
Plugin Name: Fix Theme Stylesheets
Plugin URI:  https://dev59.com/mpDea4cB1Zd3GeqPgczq
Description: Save me from these poorly coded marketplace themes
Version:     0.1-alpha
Author:      helgatheviking
Author URI:  http://kathyisawesome.com
 */


function so_33544364_custom_scripts() {
    $theme = get_template();

    if( ! is_admin() && 'your-themes-folder-name' == $theme ){
        // get rid of the child theme's crappy stylesheet
        wp_deregister_style( 'child-style' );
        // optionaly load the parent theme directly instead of importing. can be better for minifying plugins
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        // load your improved stylsheet! style.css in the same folder as this plugin file
        wp_enqueue_style( 'your-style', plugins_url( 'style.css', __FILE__ ) );
    }
}

add_action( 'wp_enqueue_scripts', 'so_33544364_custom_scripts' );

谢谢!我认为这是最好的方法!我改变的一件事是使用优先级“30”触发操作,以在woocommerce之后加载样式表。 - Afterlame
我不确定应该把正确答案给谁。你为我的问题提供了最佳解决方案,但@Moob从标题回答了这个问题... - Afterlame
这完全取决于你。当一个晚到的用户给出了一个更好(对于我的项目)的解决方案时,我已经两次更改了我的“接受”答案...我不能确定,但@moob看起来有足够的声望在这里待很长时间,而且可能不会生气...然而,在我看来,你要求一个CSS解决方案,甚至没有用php标记你的问题,所以在这种情况下,改变有效答案似乎是不公平的。这是你的决定,但我仍然投票支持这个答案。 - Alvaro Menéndez
如果你不接受,我也不会感到难过。另一个答案显然已经回答了你所问的问题。我试图回答你想要问的问题。 ;) - helgatheviking
哈哈,没错,就是这样:Moob回答了我的问题,所以我不会更改采纳答案,但你给了我一个好的解决方案,所以接受我的点赞和感激之情。;) - Afterlame
@Afterlame - 对我来说,你选择接受谁的答案或者以后改变主意都无所谓。你应该接受最好回答了问题的答案,但最终最好的答案是解决你问题的那个。 - Moob

0

!important 在99%的情况下是一种懒惰的方式,用来获得本应通过更具体的方式达到的效果;具体性和定位都是关键因素,例如:

p.foo { text-align: right; } 

可以通过以下方式进行覆盖:

body p.foo { text-align: left; }

具体性非常重要,这是正确的方法,以下是如何计算它: link


2
这不是问题的答案。他已经知道!important。在添加答案之前请阅读问题。 - Alvaro Menéndez
更高的优先级不会覆盖 !important,所以这对我没有用... - Afterlame
考虑问题的特殊性是解决问题的最佳方式,而不是寻找另一个“更高级别的!important”。 我的意见只是一种考虑,而不是对问题的批评。 在评论之前,请仔细阅读答案并考虑其含义,谢谢。 - holden
@afterflame:你确实无法这样做,这就是为什么你应该从原始的.css文件中考虑它。如果你的问题只是“如何覆盖!important语句?”答案是:“只有inline可以”。 - holden
@holden 我同意你的观点,尽可能在自己的代码中完全避免使用 !important,但似乎没有办法在不改变原始样式表的情况下实现这一点。如果我可以修改原始的 CSS 文件,我可以像你建议的那样做,但如果我的客户更新第三方主题,所有的 !important 声明都会回来,我的 CSS 就毫无价值了。 - Afterlame

-2

嗯,你可以尝试使用父级div..例如:

.parent_div Child_div ul li{
  margin: 0px;
}

这是一种不使用 !important 的方法。父级 div 的优先级必须高于 !important。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接