Question

我有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类的backgroung-color属性值覆盖。如何通过brouwser选择正确的值，我该如何克服这个？

Answer 1

当应用具有相同特异性的两个冲突规则时，后者获胜。）在你的情况下.general_obj背景颜色规则获胜（=实际应用），因为它在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 { background-color: #00EE76; }
（强烈建议）修复CSS文件，以便首先描述泛型类的规则，并遵循特定类的规则。

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

Answer 2

你可以尝试：

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

？注意最后还有分号（;）。缺少分号会产生错误。

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

2 个答案: