css class override with style html snippet

嗨我正在使用使用CSS为按钮和菜单项着色的CMS（内容管理系统）。css class override with style html snippet

我用火狐显影剂来检查元件和按钮标记为

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

相信“CTA-定制颜色-0”为其中颜色被包含为按钮。

我尝试添加下面的HTML片段到页面

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

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

用风格片段覆盖颜色的正确CSS语法是什么？

看到Send to Google Maps Button here on sample page

来源

2016-11-07 Viktor

您可能需要更多特异性。 'span.cta-custom-color-0'有什么区别吗？ –

大多数浏览器的开发工具都会显示如何将样式应用到元素，这是确定问题的最简单方法。在默认的Firefox检查器中，它位于面板右侧的“规则”选项卡下。 –

span.cta-button.cta-icon-left.cta-custom-color-0.cta-button-medium.cta-button-nomocaption.cta-button-nomosubcaption。cta-button-nomoicon – Medda86

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

原来你试图设置一个包装的颜色，但实际黑颜色来自内部元件与类.cta-body.cta-normal

所以我相信你将需要：

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

来源

2016-11-07 19:11:32 tmslnz

你能展示如何改变'悬停'按钮的颜色吗？现在它的灰色。谢谢！ – Viktor

看看检查员，你应该找到一个按钮（在我的屏幕截图右上角 - 铬），说：'hov'。这将帮助您找到相应的规则 – tmslnz

-2

.cta定制颜色 - 0 {背景颜色：＃8640a8重要;}

添加此确保这个类不使用其他任何地方之前，否则会加重这种所有的元素颜色具有一流“的CTA，定制颜色 - 0”

来源

2016-11-07 18:56:58

'！important'只能用于覆盖第三方样式属性，如果有的话。 – tmslnz

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

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

来源

2016-11-07 19:10:52 HarrisJT

<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>

感谢大家的贡献。这是最后的片段。添加'span'并添加！重要的如上所述澄清了它。

最大的帮助来自tmslnz - 谢谢!!!〜以上的见解和图像显示.cta-body.cta-normal - 这是一个'嵌套'CSS。

再次感谢所有参与者。我相信这将帮助许多正在使用固定CMS系统的开发人员修改其颜色方案。 - Viktor

来源

2016-11-07 20:37:39 Viktor

css class override with style html snippet

回答

相关问题