ホバー時にクラスおよび疑似クラスの CSS セレクターが疑似クラスのみのセレクターをオーバーライドするのはなぜですか?

より高い特異性を持つ CSS セレクターが他のものをオーバーライドする理由: ホバー時のリンクの出現のケース

はじめに

CSS では、複数のセレクターが同じ要素に適用される場合、最も高い特異性を持つセレクターが適用されます。が優先されます。この原則は、クラスと疑似クラス (.foo a:link) の両方を使用するセレクターが、疑似クラスのみを使用する他のセレクター (例: a:hover) をオーバーライドする以下の例で明らかです。

特異性について

どのセレクターが最も高い特異性を持つかを判断するには、次の点を考慮してください。メトリクス:

• インライン スタイルは最も高い特異性を持っています (1)
• ID セレクターはクラス、要素、またはユニバーサル セレクターよりも高い特異性を持っています (0)
• クラス、要素、またはユニバーサル セレクターが同じ特異性を持つ (1)

説明例の

指定された HTML および CSS コードでは、次のセレクターが .foo div 内のリンク要素に適用されます:

• .foo a:link、 .foo a:visited (より高い特異性: クラスと疑似クラス)
• a:link、 a:visited (低い特異性: 疑似クラスのみ)
• a:hover、a:active (.foo a:link と同じ特異性)

提供された特異性テーブルに基づく, .foo a:link は a:hover をオーバーライドします。これは、前者の方が a:hover が含まれているため優先順位が高いためです。 class.

問題の修正

問題を修正し、ホバーされたリンクが赤く表示されるようにするには、.foo a:link セレクターを変更して確実に表示されるようにする必要があります。 a:hover で定義されたスタイルをオーバーライドしないでください。考えられる修正の 1 つは、.foo コンテキスト内に hover 用のより具体的なセレクターを追加することです。

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

より具体的なセレクターを導入すると、より具体的でない .foo a:link セレクターよりも優先され、正しい色を表示するためのホバー動作。

以上がホバー時にクラスおよび疑似クラスの CSS セレクターが疑似クラスのみのセレクターをオーバーライドするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。