Overwrite a plugin's CSS?

时间:2017-11-15 作者:AAA

我正在使用一个插件,该插件的按钮代码如下:

<a class="bwg_load_btn_1 bwg_load_btn" href="javascript:void(0);">Load More...</a>
我想将文本使用的字体大小增加到16x。我该怎么做?我认为我需要在我的风格中添加代码。我的主题是css,但我不能百分之百确定要添加什么。

提前谢谢你

4 个回复
最合适的回答,由SO网友:HeroWeb512 整理而成

有两种方法可以解决这个问题

No.1在插件中找到类名为“bwg\\u load\\u btn\\u 1 bwg\\u load\\u btn”的“a”标记,并添加如下内联样式

<a class="bwg_load_btn_1 bwg_load_btn" href="javascript:void(0);" style="font-size:16px;">Load More...</a>
您的风格排名第二。css为此类添加字体大小!重要的是
 .bwg_load_btn_1.bwg_load_btn{
      /* !important will override the style */
      font-size:16px !important;
 }

SO网友:Kristian Kalvå

如果您安装Jetpack,您将能够编写自定义CSS,以便在任何其他CSS之后加载。如果你不想要完整的Jetpack,我相信还有其他插件可以做css注入。或者您可以将css添加到您自己的主题css中。

要更改字体大小,您需要添加以下内容:

.bwg_load_btn_1 {
  font-size: 2em;
}
在没有看到btn本身的css的情况下,确切地说什么是可行的有点困难,但代码应该可以工作。或者,您可以将选择器与自身链接,以增加特异性:

.bwg_load_btn_1.bwg_load_btn_1.bwg_load_btn_1 {}
不要使用!重要的是,如果你不需要,你只会给自己带来比你需要的更多的问题。也就是说,如果插件使用!重要提示:要设置按钮样式,您需要使用!重要的是你自己。

SO网友:HU ist Sebastian

只要插件css中没有“!important”符号,最好的做法就是坚持css的黄金法则:

规则越具体,就越重要。

因此,如果您想覆盖一个规则,请在css中放置一个在选择器中更具体的规则。如果插件。css说

.bwg_load_btn_1.bwg_load_btn {
    font-size:12px;
}
然后,您可以通过使用

body .bwg_load_btn_1.bwg_load_btn {
    font-size:16px;
}
不需要额外的插件或重要组件。

SO网友:Juan Carlos Chavez

一个简单的解决方案是单击仪表板菜单中“外观”下的“自定义”,在它切换后,您可以在显示其他CSS的位置添加任何自定义CSS。它将自动覆盖。

我认为对新开发人员这样做的好处是,您可以在这里保存CSS修改,而如果您修改样式。直接使用css并忘记保存,以后更新主题时可能会忘记并丢失它。

因此,最好将自定义CSS放在上述位置,或者放在特定主题选项提供的自定义CSS选项中。

结束