不同的css類具有相同的屬性，但值不同

我有2個css類，用於保存背景顏色屬性。一個類用於一般元素，另一個用於選定元素。根據我在模型中的數據，將selected_element類放在元素上。這是CSS：不同的css類具有相同的屬性，但值不同

.selected_obj { 
    background-color: #00EE76 
} 

.general_obj{ 
    /* Othe CSS Properties */ 
    background-color: #d9d9d9; 
}

這是我的JSP：

<c:forEach items="${myModel.myCollection}" var="obj"> 
     <c:choose> 
      <c:when test="${obj.id == myModel.selectedObj.id}"> 
       <div class="selected_obj general_obj"> 
        <span>${obj.name}</span> 
       </div> 
      </c:when> 
      <c:otherwise> 
       <div class="general_obj"> 
        <span>${obj.name}</span> 
       </div> 
      </c:otherwise> 
     </c:choose> 
    </c:forEach>

當我查看生成的HTML，我可以看到正確的元素selected_obj類但該值是由backgroung重寫general_obj類的color屬性值。 brouwser如何選擇正確的價值，我如何克服這一點？

來源

2012-10-21 Mr T.

您是否嘗試將'class =「selected_obj general_obj」''更改爲'class =「general_obj selected_obj」'？ – alestanis

當兩個具有相同特異性的衝突規則被應用時，後者獲勝。）在你的案例中.general_obj background-color rule wins（=實際應用），因爲它在CSS文件中的.specific_obj規則之後。

This - class="general_obj selected_obj" - HTML中的更改將無法解決問題，因爲這兩個類仍具有相同的特性。解決這個問題

一個顯而易見的方法是使用!important：

.selected_obj { 
    background-color: #00EE76 !important; 
}

...與!important指定樣式將覆蓋否則應該使用的樣式（按照一般的CSS層疊規則）。

這很好地解決了問題，但我實際上強烈建議不要這樣做（原因在this article中描述得相當好; CSS-Tricks在該主題上也有a mighty word）。

相反，你可能要麼...

爲這種情況下，具體的多級規則，就像這樣：

.selected_obj, .selected_obj.generic_obj { background-color: #00EE76; }
（強烈建議）修復CSS文件因此首先描述泛型類的規則，然後遵循特定類的規則。

其實，這是一個很好的經驗法則：首先處理所有的通用事物，然後處理專業。）

來源

2012-10-21 11:19:15 raina77ow

你可以嘗試：

.selected_obj { 
    background-color: #00EE76 !important; 
}

？最後還要注意分號（;）。缺少分號可能會產生錯誤。

來源

2012-10-21 11:20:24

在這種情況下不能產生錯誤。 – BoltClock

在背景顏色後添加另一行，並且您沒有爲每個人輕鬆找到錯誤。不建議使用'！important'的 –

，請參閱@ raina77ow的答案中的鏈接 – Luca

不同的css類具有相同的屬性，但值不同

回答

相關問題