0

我有 2 个包含 background-color 属性的 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 类的背景颜色属性值覆盖。浏览器如何选择正确的值，我该如何克服？

4

2 回答 2

2

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

这 - class="general_obj selected_obj"HTML 中的更改不会解决问题，因为这两个类仍然具有相同的特异性。

解决此问题的一种明显方法是使用!important：

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

... 作为指定!important的样式将覆盖原本应该应用的样式（通过遵循一般的 CSS 级联规则）。

这作为一个快速修复很不错，但我实际上强烈建议不要这样做（原因在这篇文章中描述得很好；CSS-Tricks 在这个主题上也有一个强有力的词）。

相反，您可以...

  • 为这种情况制定特定的多类规则，如下所示：

    .selected_obj, .selected_obj.generic_obj { background-color: #00EE76; }

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

实际上，这是一个很好的经验法则：首先处理所有通用的事情，然后处理专业的事情。)

于 2012-10-21T11:19:15.060 回答
0

你可以试试：

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

? 还要注意末尾的分号 (;)。缺少分号会产生错误。

于 2012-10-21T11:20:24.180 回答