覆盖插件css的最佳方式?

时间:2010-10-07 作者:Mild Fuzz

目前,我使用CSS特性来覆盖插件样式。我更喜欢用它来编辑插件,因为它在更新时不会让人头疼。

如果我的样式表是在插件之后加载的,那就太好了,这样我只需要像插件一样具体,而不是更多。这将使我的样式表更加漂亮。

7 个回复
最合适的回答,由SO网友:Tim Coulter 整理而成

正如您所建议的,最优雅的方法是在插件注入CSS之后加载CSS覆盖。这很容易实现-您只需确保header.php 呼叫wp_head() 在引用样式表之前:

<head>
    <!-- all the usual preamble stuff goes here -->

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo(\'stylesheet_url\'); ?>" type="text/css" />
</head>

SO网友:Rarst

插件有几种处理CSS的方法。

最佳情况:插件对CSS进行排队,并提供禁用选项(禁用它,将CSS代码复制到样式表中,然后高兴起来)How to dequeue a script? (也适用于样式)。短版本-在未来的WP版本中将有出列功能,目前可以使用wp_deregister_*总的来说,我认为禁用单独的样式表并将它们合并到自己的样式表中会更好、更容易,以最小化问题并提高性能(获取的文件更少)。

SO网友:Andreas

另一种非常优雅的方法是使用CSS的特殊性。

因此,如果插件的css显示:

div.product div.images img {
  ......
}
您可以在css中定义:

body div.product div.images img {
  ......
}
另请参见answer of Michael Rader 对于类似的问题。

SO网友:Sven Knoch

我将“不愿意”插件CSS的副本保存到主题文件夹中,并通过添加

@import url(\'name-of-the-plugin-css.css\');
(当然,将.css的名称替换为我正在注入的名称)。然后,我修改主题文件夹中的css副本,并将其保存到服务器,就像我对其他文件所做的那样。哦,是的,有时可能需要通过给ID或类指定一个“!important”来“钉住”更改的ID或类。

我不知道这是否是最先进的,但它并没有害处,而且效果很好。

SO网友:Randy D

我最终使用了!这对我的自定义css很重要,它覆盖了我遇到问题的插件的样式。插件的开发人员正在使用!在整个插件css中都很重要,这就是为什么没有它我无法覆盖它!重要的

body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;    
}

SO网友:Sean H. Smith

为了覆盖插件的css,已经在使用特殊性和!重要的是,我使用id重写了这些类。这确实清理了我的代码。当然,它也不是一个完美的解决方案,因为它只在有id分配给元素和类的情况下才起作用。

理论上也可以使用属性选择器。然而,我还没有对这一理论进行测试。

SO网友:dsdsd

为了覆盖插件的css,已经在使用特殊性和!重要的是,我使用id重写了这些类。这确实清理了我的代码。当然,它也不是一个完美的解决方案,因为它只在有id分配给元素和类的情况下才起作用。

理论上也可以使用属性选择器。然而,我还没有对这一理论进行测试。

结束

相关推荐

是否将插件限制为仅在选定页面上加载其CSS和JS?

我想让一个插件将CSS样式表和JavaScript JS文件的加载限制为只加载需要的页面。我的问题的一个例子是插件Contact Form 7 我用它在我的网站上的一个页面上创建了一个表单contact me“页面)。但是,它会在网站上的每个页面/帖子中添加以下行:<link rel=\'stylesheet\' id=\'contact-form-7-css\' href=\'http://www.r-statistics.com/wp-content/plugins/contact-form-