javascript - このホバー addClass が機能しないのはなぜですか?

Question

jQuery は次のとおりです。

$(document).ready(function() {
    $('#box').click(function() {
        $(this).addClass('fullColor');
    });
});

CSSは次のとおりです。

#box {
    width:200px;
    height:200px;
    background-color:blue;
    opacity:0.5;
}

.fullColor {
    opacity:1.0;
}

score 2 · Accepted Answer

クラスが正しく追加されました。(これは、適切な開発者ツールを使用して検証できます/すべきでした..適用されたルールとその理由も示されます。)

ただし、CSS の特異性により、#boxルールは常に優先されます。.fullColor

特異性は、カスケーディングスタイルシート (CSS) ルールの表示方法に関係する重み付けの一種です。2 つのセレクターが同じ要素に適用される場合、特異性の高い方が優先されます。

セレクターとして使用し、結果を観察します。クラスが存在する場合にのみ適用されるため、#box.fullColorよりも「より具体的」です。#box.fullColor

これが不可能な場合 (時々発生します) は!important使用できますが、そのような使用は慎重に行う必要があります。

score 1 · Accepted Answer

これらの CSS 値を保持する必要がある場合、洗練されていない解決策は、 fullColor 不透明度に!importantを追加することです。

.fullColor{
    opacity:1.0 !important;
 }

3 に答える 3