如何在编辑器中添加自定义CSS?

时间:2021-12-18 作者:Sy Ker

我已经为这件事挣扎了一段时间。

我试图以列或块中的元素为目标,在本例中是WPForm的“提交”按钮。

因此,我在Firefox中打开开发人员工具,选择我的元素并获取类名:

<button type="submit" name="wpforms[submit]" id="wpforms-submit-863" class="wpforms-submit" data-alt-text="Sending..." data-submit-text="Submit" aria-live="assertive" value="wpforms-submit">Submit</button>
现在,在编辑器中,我选择表单(或列),并将以下内容添加到自定义CSS部分:

.button[type="submit"] {
  background: yellow;
}
我试过了wpforms-submit 然而,其他的变化没有发生,这也不是第一次。我想我只是不了解一些关于逻辑或嵌套或其他的东西。

如何在编辑器中使用自定义CSS定位元素?

1 个回复
SO网友:Tomas Korinek

从您所写的内容来看,您可能需要了解CSS的特殊性。。。简而言之,这意味着:CSS选择器越具体,它的价值就越大,因此将使用它而不是较弱的选择器。(例如,您可以了解更多信息here.)

插件通常使用更复杂和特定的选择器,因此您需要确保使选择器更强大,以便覆盖初始样式。基本上有几种方法:

使选择器更具体使用相同的选择器,但稍后将其放入代码中使用!important 定义中的标志(最好只在危急情况下使用)而且WPForms似乎提供了为元素设置特定类的功能(检查here). 在选择器中使用这些类可能会使它们更具体,因此它们会覆盖初始类。

相关推荐

语法错误可能会导致CSS灾难性故障

WordPress和StackExchange是新手,请原谅我的礼节不好。我正在为一门课制作一个自定义的WordPress主题,在这条线上的某个地方出现了一个我和我的教授都找不到的小错误,但这特别导致我的整个CSS页面无法加载。通过故障排除,我们发现这可能是中的某个问题。php文件。有人看到任何可能导致如此巨大问题的东西吗?我很遗憾如此笨拙地请求帮助,但我们被难住了!index.html <?php get_header(); ?> <?php get_side