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

回答

相關問題