0

background-color プロパティを保持する 2 つの CSS クラスがあります。1 つのクラスは一般的な要素用で、もう 1 つのクラスは選択された要素用です。モデルにあるデータに従って、要素に 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

同じ特異性を持つ 2 つの競合するルールが適用される場合、後者が優先されます。) あなたの場合、CSS ファイル.general_objのルールの後に続くため、background-color ルールが優先されます (= 実際に適用されます) 。.specific_obj

この -- class="general_obj selected_obj"HTML の変更は問題を解決するものではありません。両方のクラスが同じ特異性を持っているからです。

この問題を解決するための明白なアプローチの 1 つは、以下を使用することです!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 に答える