使CSS背景不被別人覆蓋？

我正在joomla模板上工作，並且我在模塊中創建了一個自定義按鈕，但按鈕css被模塊css覆蓋。我怎樣才能解決這個問題。幫助將不勝感激。使CSS背景不被別人覆蓋？

這是CSS我想爲按鈕：

.button-middle { 
    background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent; 
    color: #FFFFFF; 
    float: left; 
    height: 27px; 
    line-height: 27px; 
}

下面的代碼具有覆蓋按鈕背景:(

div.module div div div div, div.module_menu div div div div, div.module_text div div div div, div.module_grey div div div div { 
    background: none repeat scroll 0 0 transparent; 
    margin: 0; 
    overflow: hidden; 
    padding: 0; 
} 
template_css.css (line 342) 
div.module div div div, div.module_menu div div div, div.module_text div div div, div.module_grey div div div { 
    background: url("../images/module_default/mod_tlb.png") no-repeat scroll left top transparent; 
    padding: 0 15px 15px; 
} 
template_css.css (line 304) 
div.module div div, div.module_menu div div, div.module_text div div, div.module_grey div div { 
    background: url("../images/module_default/mod_trb.png") no-repeat scroll right top transparent; 
    padding: 0; 
}

來源

2011-12-07 user1085567

所以......許多... ...的div – BoltClock

也就是說相當混亂CSS來讀。我的意思是說，「div.module_menu DIV DIV DIV格」 @BoltClock我的想法完全吻合。 – Joonas

在後臺的末尾添加!important：

background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent !important;

來源

2011-12-07 12:19:54 Pedryk

GREAT..many thax。它現在正常工作 – user1085567

通常我會吼人的人與「添加！重要的「，但我想我會讓這張幻燈片給出上面的選擇器...... – BoltClock

您的自定義CSS文件的<link>聲明是否正確（如果您正在使用一個）在Joomla的包含你的<head>部分的CSS文件之後？如果你沒有使用自定義的CSS文件，請考慮它 - 這意味着你可以完全避免類似的問題，通過讓你自己的選擇器「勝過」Joomla's，這是因爲你的CSS最後加載（從而獲得更高的優先級）。

<!-- Joomla styles --> 
<link rel="stylesheet" href="joomla.css" /> 
<!-- anything in here overrides anything in "joomla.css" --> 
<link rel="stylesheet" href="custom_styles.css" />

（省略在截止括號/爲HTML 5）

如果你曾經有過這個問題，相信我，你會再次擁有它。（再次...）

來源

2011-12-07 12:31:07

如果你有控制標記，你可以通過添加一個id屬性，然後讓你的背景選擇器#someid逃脫。據我所知，只有類和元素選擇器，一個id選擇器可能勝過它們。

聲明：即時在火車上，我無法對此進行測試。這可能完全不正確。我也沒有CSS專用規範來檢查。

編輯：

考慮下面的標記：

<div id="info" class="module"> 
    <div> 
     <div> 
      <div> 
       <div> 
        <div> 
         <div> 
          <div class="test"> 
           data 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

，然後將下面的CSS：

.test { background-color: red; } /* 0,1,0 */ 
div.module div div div div div div { background-color: blue; } /* 0,1,7 */ 
#info .test { background-color: green; } /* 1,0,1 */

單詞「數據」將有綠色的背景顏色。

即使您不能輕易更改標記以添加標識，請嘗試在父母鏈中的任意位置查找標識，或者您可以將選擇標記爲div.module .button-middle { ... }，該選擇仍然歸類爲0,2,1。只要你的風格比你想重寫的風格更具體，它就會勝出。

fiddle here。

而且對特異性的幾個環節：here和here。

來源

2011-12-07 12:38:58

使CSS背景不被別人覆蓋？

回答

相關問題