なぜ `.foo a` が CSS 特異性の `a:hover` と `a:active` をオーバーライドするのでしょうか?

仕様性の難問: セレクターの .foo が a:hover、a:active を無効にする理由

CSS の仕様性により、セレクターに基づいてスタイルが適用される方法が決まります重さ。与えられた問題では、.foo セレクターが a:hover および a:active と競合します。

特異性について理解する

特異性はタグ、クラスの数によって決まります。 、セレクター内の ID であり、各レベルは特定の重みを保持します。この場合、提供された特異性テーブルは、.foo a:link および .foo a:visited が a:hover および a:active (0 0 1 1) よりも高い特異性 (0 0 2 1) を持っていることを示しています。

.foo a がオーバーライドされる理由

.foo a セレクターはより具体的ですa:hover や a:active よりも、foo クラスの要素内のリンクに適用されるためです。要素が同じ詳細性を持つ複数のセレクターに一致する場合、最後に宣言されたスタイルが適用されます。

.foo a セレクターを修正する

a:hover と a: を許可するには:アクティブなスタイルを優先するには、.foo セレクターを変更して、より低い特異性を持つようにする必要があります。考えられる修正の 1 つは次のとおりです。

.foo a:hover, .foo a:active {
    color: red;
}

hover およびアクティブな疑似クラスの前に .foo を追加すると、具体性が a:hover や a:active よりも高く保たれ、これらの疑似クラスのスタイルが確実に保証されます。 foo を使用して要素内に適用されるclass.

要点

詳細度は、CSS スタイルの適用方法を決定します。この概念を理解することは、スタイルの優先順位を制御し、目的の視覚効果を実現するために非常に重要です。

以上がなぜ `.foo a` が CSS 特異性の `a:hover` と `a:active` をオーバーライドするのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。