覆盖插件CSS的最佳方法？

36

目前，我使用CSS特定性来覆盖插件样式。我更喜欢用它来编辑插件，因为它在您更新时会减少麻烦。

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

plugins css

— 轻度绒毛
source

1

赞成教我有关CSS特异性的知识，在您提出问题之前从未听说过它，它对我有很大帮助！

— luke_mclachlan

21

如您所建议，最优雅的方法是在插件插入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>

— 蒂姆库尔特
source

如果我使用的是儿童主题，该怎么办？我不喜欢覆盖父主题的header.php。

— Jules 2012年

19

插件可以通过多种方式处理CSS。

最好的情况：插件将CSS排入队列并提供禁用它的选项（禁用它，将CSS代码复制到样式表中即可）；
很好的例子：插件挂钩功能，可以将样式排队（取消挂钩功能，如果需要，可以用mods挂钩）；
通常情况：插件直接将CSS排队。请参阅如何使脚本出队？（也适用于样式）。短版-将来的WP版本中将有出队功能，现在可以解决wp_deregister_*
糟糕的情况：插件在许多其他事情中回响了CSS。视情况而定...

总的来说，我认为禁用单独的样式表并将其合并到您自己中以减少问题并提高性能（减少要提取的文件）会更好，更轻松。

— 腊斯特
source

我怎么知道是哪一个？

— 伊恩·爱丁顿

1

通过主要查看代码。:)

— 拉斯特

1

我将“不愿意的”插件CSS的副本保存到主题文件夹，然后通过添加将其导入主题CSS

@import url('name-of-the-plugin-css.css');

（当然，用我要插入的名称替换.css的名称）。然后，我修改主题文件夹中的css副本，然后像处理其他文件一样将其保存到服务器。哦，是的，有时可能需要通过为它们分配“！important”来“钉住”更改的ID或类。

我不知道这是否是最新技术，但是它没有危害并且可以正常工作。

— 斯文·诺奇
source

1

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

因此，如果插件的CSS表示：

div.product div.images img {
  ......
}

您在CSS中定义：

body div.product div.images img {
  ......
}

另请参阅Michael Rader的答案以获取类似问题。

— 安德烈亚斯
source

好的，非常感谢。这将是我接受的答案。只需使用一般的style.css，特异性就可以发挥出它的光泽！

— 卡·雷格尔林

0

要覆盖已经使用特殊性和！important的插件的CSS，我使用了ID来覆盖类。这确实清理了我的代码。当然，它也不是一个完美的解决方案，因为它仅在将id分配给元素和类时才起作用。

从理论上讲，您也可以使用属性选择器。但是，我尚未对该理论进行检验。

— 肖恩·史密斯
source

0

我最终对自定义css使用！important，并且覆盖了我遇到麻烦的插件的样式。插件的开发人员在整个插件css中都使用！important，这就是为什么没有！important不能覆盖它的原因。

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

— 兰迪D
source

-1

要覆盖已经使用特殊性和！important的插件的CSS，我使用了ID来覆盖类。这确实清理了我的代码。当然，它也不是一个完美的解决方案，因为它仅在将id分配给元素和类时才起作用。

从理论上讲，您也可以使用属性选择器。但是，我尚未对该理论进行检验。

— dsdsd
source