css - #my_id が CSS で .my_class:hover をオーバーライドするのはなぜですか?

Question

ID に適用される CSS ルールはクラスルールよりも優先度が高く、これは理にかなっています。私が得られないのは、これが理由です：

<div id="global_button" class="global_button_class"></div>

#global_button
{
   opacity:0.7;
}

.global_button_class:hover
{
   opacity:1;
}

...マウスがボタンの上に置かれたときに不透明度を変更しませんが、次のように変更すると:

.global_button_class:hover

...に：

#global_button:hover

...できます。つまり、ホバー状態が ID によって定義されていない場合、なぜ起動しない.global_button_class:hoverのでしょうか?

score 1 · Accepted Answer

基本的に、要素 ID を使用して opacity プロパティを設定したため、ホバー、フォーカス、アクティブなどの状態も設定されます。

アタッチしたクラス名を使用してホバー状態を設定しようとすると、クラスよりも重みのある前述の ID によって上書きされます。

ID > クラス

score 1 · Accepted Answer

こんにちは、これに慣れました

#global_button.global_button_class:hover{
opacity:1;
}

あなたのdefine opacity intoIDまたはid価値が高いからです class

ID value is  == 100
Class value is == 10

score 1 · Accepted Answer

これはすべて特異性にかかっています（ここでよりよく説明されています）。基本的に優先順位はidクラス要素です。

Malarkey は、George Lucas スタイル ( CSS の優先順位の説明)に素敵な傾斜を与えます。

score 0 · Accepted Answer

解決策は次のとおりではないでしょうか。

<div id="global_button"></div>

#global_button {
opacity:0.7;
}

#global_button:hover {
opacity:1;
}

4 に答える 4