私の `.foo a:link` および `.foo a:visited` CSS が `a:hover` および `a:active` をオーバーライドするのはなぜですか?

CSS の .foo a:link、.foo a:visited セレクターが a:hover、a:active セレクターをオーバーライドするのはなぜですか?

質問で説明されている予期しない動作は、CSS の特異性ルールから発生します。特異性は、複数のルールが同じ要素に適用される場合の CSS ルールの優先順位を決定します。

特異性テーブル:

Selector	Specificity
a:link	0-0-1-1
a:visited	0-0-1-1
a:hover	0-0-1-1
a:active	0-0-1-1
.foo a:link	0-0-2-1
.foo a:visited	0-0-2-1

ご覧のとおり、 .foo a:linkおよび .foo a:visited は、追加のクラス セレクターにより、a:hover および a:active よりもわずかに高い特異性を持ちます。 .foo.

特異性オーバーライドの仕組み:

異なる特異性を持つ複数のルールが同じ要素に適用される場合、より高い特異性を持つルールが優先されます。この場合、 .foo a:link および .foo a:visited は a:hover および a:active よりも高い特異性を持っているため、それらのスタイルは後者のスタイルをオーバーライドします。

動作の修正:

.foo a:link、.foo a:visited セレクターがオーバーライドされないようにするにはa:hover、a:active、後者の特異性を高めることができます。これは、ホバー/アクティブ ルールに子セレクターを追加することで実現できます。

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

.foo クラスを子セレクターとして追加すると、ホバー/アクティブ ルールの特異性が 0-0- に増加します。 3-1 であり、.foo a:link および .foo a:visited よりも高くなります。その結果、両方の疑似クラスが適用される場合、ホバー/アクティブ スタイルが優先され、リンク/訪問済みスタイルよりも有効になります。

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