css - 具有相同属性但不同值的不同 css 类

Question

我有 2 个包含背景颜色属性的 css 类。一类用于一般元素，另一类用于选定元素。我根据模型中的数据将 selected_element 类放在元素上。 这是 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 类，但该值被 general_obj 类的 backgroung-color 属性值覆盖。浏览器如何选择正确的值，我该如何克服这个问题？

Answer 1

当要应用两个具有相同特异性的冲突规则时，后一个获胜。 ) 在你的情况下 .general_obj background-color 规则获胜(= 实际上应用)，因为它遵循 CSS 文件中的 .specific_obj 规则。

这 - 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 { 背景色:#00EE76； }

• (强烈建议)修复 CSS 文件，以便首先描述通用类的规则，然后再描述特定类的规则。

实际上，这是一个很好的经验法则:首先处理所有通用的东西，然后再处理特殊的东西。 )