不同的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类具有相同的属性，但值不同

回答

相关问题