如何更改 CSS 中按钮的背景颜色？

Question

所以我尝试在 Wordpress 上添加一些额外的 CSS 并覆盖此表单按钮的颜色，但没有任何反应。我在这里输入了正确的代码吗？

当我检查这个按钮时...

<form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-1527" method="post" data-id="1527" data-name="Get Started"><div class="mc4wp-form-fields"><div class="input-group">
  <div class="input-icon"><i class="far fa-paper-plane"></i></div>
    <input type="email" placeholder="Your email address" class="form-control" name="email" data-error="e-mail field is required" required="">
  <button type="submit" value="Subscribe" class="item-btn">Subscribe</button>
</div></div><label style="display: none !important;">Leave this field empty if you're human: <input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off"></label><input type="hidden" name="_mc4wp_timestamp" value="1635448917"><input type="hidden" name="_mc4wp_form_id" value="1527"><input type="hidden" name="_mc4wp_form_element_id" value="mc4wp-form-1"><div class="mc4wp-response"></div></form>

我之所以尝试button.item-btn::before 是因为它在检查器中显示了这一点

Answer 1

尝试将 CSS 样式添加为内联按钮元素。

内联样式将覆盖来自外部 css 文件的样式。

您还可以尝试在表单元素中使用 id 选择器 id=mc4wp-form-1 来增加 css 样式的特异性以帮助覆盖默认值。

Answer 2

您的选择器减去伪元素应该可以完成这项工作。 也许您的样式表中的按钮有另一个背景颜色定义，具有更高的特异性。 您可以尝试像这样提高选择器的特异性：

#mc4wp-form-1 button.item-btn {
  background-color: mycolor;
}