使用样式html片段

Question

您好我正在使用CMS（内容管理系统），它使用CSS为按钮和菜单项着色。

我使用Firefox开发人员检查元素，按钮标记为

<span class="cta-button cta-icon-left  cta-custom-color-0 cta-button-medium cta-button-nomocaption cta-button-nomosubcaption cta-button-nomoicon">

我相信'cta-custom-color-0'是按钮包含颜色的地方。

我尝试将以下HTML代码段添加到页面

<style>
.cta-custom-color-0 {background-color: #8640a8;}
</style>

但是它没有改变按钮颜色。

使用样式代码段覆盖颜色的正确CSS语法是什么？

请参阅Send to Google Maps Button here on sample page

Answer 1

就像评论者所说，你需要使用浏览器的开发者工具，并找到感兴趣的元素。

原来你试图设置包装器的颜色，但实际的黑色来自内部元素.cta-body.cta-normal

所以我相信你需要：

.cta-body.cta-normal {background-color: #8640a8;}

Answer 2

.cta-custom-color-0.cta-custom-color-0 {}

您可以继续链接这些链接，直到它具有足够的特异性才能工作。我会避免其他黑客或添加大量的父元素。

Answer 3

<style>
span.cta-custom-color-0 .cta-body.cta-normal {background-color: #8640a8!important;}
span.cta-custom-color-0 .cta-body.cta-over {background-color: #00d486!important;}
</style>

感谢所有贡献者。这是最后的片段。添加＆＃39; span＆＃39;并且还加上！重要的，如上所述澄清了它。

最大的帮助来自tmslnz - 谢谢!!!〜上面的见解和图片显示.cta-body.cta-normal - 它是一个嵌套的＆＃39; CSS。

再次感谢所有贡献者。我相信这将有助于许多使用固定CMS系统的开发人员修改他们的配色方案。 - 维克多

Answer 4

.cta-custom-color-0 {background-color：＃8640a8！important;}

在添加之前，请确保此类不会在其他任何地方使用，否则会在所有具有“cta-custom-color-0”类的元素上添加此颜色