css - Wordpress 按钮不继承自定义 CSS 类

Question

我正在尝试在站点 http://mygapyear.wpengine.com/ 上使用 Qode Bridge 主题在 Wordpress 的页脚中添加两个按钮.按钮(位于页脚小部件区域)的代码如下:

<div>
<div style="margin-top:10px">
[button class="newsletterButton"   icon="fa-arrow-right" target="_self" text="Newsletter signup" color="#ffffff" hover_color="#ffffff"]   
</div>
<div style="margin-top:10px">
[button class="newsletterButton" color="#ffffff" hover_color="#ffffff" icon="fa-arrow-right" target="_self" text="Request a Brochure"]
</div>

我有几个问题:

1. 这些按钮似乎没有继承该类 - 在浏览器中检查它们表明它们仍在 qbutton 类中。我已将类的 CSS 代码放在 WP 的外观 > 编辑器部分和 Qode 选项 > 常规 > 自定义 CSS 部分:

   .qbutton .newsletterButton{ }
   

2. 按钮短代码中的“color”和“hover_color”属性似乎没有任何效果 - 有没有办法在 CSS 中实现它以确保颜色发生变化？

3. 有没有办法将按钮宽度设置为包含它的 div 宽度的百分比？

Answer 1

Karl 对类的看法是正确的 - 如果您试图用两个类引用同一元素，您要使用 .qbutton.newsletterButton { }。如果您的问题是您无法获得指定要应用的类，也许您可​​以尝试将类放在按钮周围的 div 上，如下所示:

<div style="margin-top:10px" class="newsletterButton">
    [button icon="fa-arrow-right" target="_self" ..etc]
</div>

并使用CSS

.newsletterButton .qbutton { }

您可以在 CSS 中设置悬停时的样式 - 试试 .newsletterButton:hover { }。

您也可以使用百分比宽度 - 只需在您的 CSS 中使用属性 width: 50%;(或您想要的任何宽度)。 Here's a good article来自关于百分比宽度的 CSS 技巧。