クラス セレクターが CSS のリンク擬似クラス スタイルをオーバーライドするのはなぜですか?

.foo セレクターがリンク スタイル仕様をオーバーライドするのはなぜですか?

CSS は、特異性ルールに基づいてスタイルを適用します。サンプル コードでは、リンク、訪問済み、ホバー、およびアクティブ状態を等しい特異性 (0 0 1 1) で定義します。ただし、.foo セレクターは、わずかに高い特異性 (0 0 2 1) を持つ追加クラスを導入します。

オーバーライド メカニズム

異なる特異性レベルを持つ複数のセレクターが適用される場合同じ要素の場合、最も高い特異性を持つセレクターが、より低い特異性を持つセレクターをオーバーライドします。ここで、.foo a:link および .foo a:visited は、a:hover および a:active よりも高い特異性を持っています。

したがって、.foo セレクターはリンクおよび動的擬似クラス セレクターをオーバーライドし、次のようなリンクが発生します。 .foo クラスは、適用される他のスタイルに関係なく緑色に表示されます。

可能修正

ホバー状態が .foo セレクターを確実にオーバーライドするには、次のことができます:

1. より具体的な .foo セレクターを追加

   別の .foo セレクターを追加して、その特異性を高めます。 クラス。例:

   .foo .link a:link, .foo .link a:visited {
       color: green;
   }

   これにより、.link クラスが .foo セレクターをオーバーライドし、ホバー状態が有効になることが保証されます。

2. !重要な宣言

   リンクとホバー スタイルを強制的にオーバーライドします! important 宣言を使用した .foo セレクター:

   a:link, a:visited {
       color: blue !important;
   }

   これにより、カラー プロパティが効果的に「ロック」され、他のセレクターが変更できないようになります。

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