CSS の特異性で `.foo a:link` が `a:hover` をオーバーライドするのはなぜですか?

CSS セレクターの特異性パズル: .foo a:link が a:hover をオーバーライドする理由

CSS の領域では、セレクターの特異性は少し頭を悩ませる可能性があります。 。 .foo a:link セレクターがより具体的な a:hover セレクターと a:active セレクターをどのようにオーバーライドできるかを示す興味深いパズルを見てみましょう。

問題の定義

次のコードを考えてみましょう。

<div class="foo">
    <a href="#">Example</a>
</div>

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

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

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

リンクの上にマウスを置くとリンクが赤くなるはずですが、代わりに赤のままになります。 緑。この不可解な動作には、CSS カスケードを詳しく調べる必要があります。

CSS の特異性

特異性は、CSS ルールが要素に適用される順序を決定します。より高い特異性は、より低い特異性よりも優先されます。次の式で特異性を計算します。

• インライン スタイル: 1、0、0、0
• ID セレクター: 0、1、0、0
• クラス セレクター: 0, 0, 1, 0
• 疑似クラスと疑似要素: 0, 0, 0, 1

パズル内のセレクターの特異性

セレクターの特異性の計算:

• a:link 、a:訪問済み、a:ホバー、a:アクティブ: 0、0、1、 1
• .foo a:link, .foo a:visited: 0, 0, 2, 1

ご覧のとおり、.foo a:link と .foo a :visited セレクターは、a:hover および a:active セレクターよりも高い特異性を持っています (2 > 1).

結論

驚くべき動作の理由は、.foo a:link および .foo a:visited セレクターが a:hover および a:active セレクターよりも高い特異性を持っているためです。セレクター。これは、たとえ a:hover と a:active が疑似クラスの点でより具体的であっても、.foo セレクターのクラス特異性が優先されることを意味します。

この問題を修正するには、問題で提案されている修正 ( .foo a:hover ルールと .foo a:active ルールのコメントを解除する必要があります。これらのルールを .foo a:link ルールおよび .foo a:visited ルールと同じ特異性で追加することで、a:hover スタイルと a:active スタイルが優先されるようになります。

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