a:リンク、a:訪問済み、a:ホバー、a:active_html/css_WEB-ITnose

１: 説明

link: 接続の通常の状態

visited: 接続が訪問された後

hover: マウスが接続上に置かれたとき

active: 接続が押されたとき


詳細:
:hover バージョン: CSS1/CSS2 互換性: IE4+ NS4+
構文:
Selector : hover { sRules }
説明:
マウスをホバーしたときにオブジェクトのスタイルシート プロパティを設定します。
CSS1 では、この疑似クラスはオブジェクトに対してのみ使用できます。また、href 属性 (プロパティ) のないオブジェクトの場合、この疑似クラスは効果がありません。 CSS2 では、この疑似クラスを任意のオブジェクトに適用できます。
現在、IE5.5+ は CSS1 の :hover のみをサポートしています。

:active バージョン: CSS1/CSS2 互換性: IE4+
構文:
セレクター: active { sRules }
説明:
オブジェクトがユーザーによってアクティブ化されたとき (マウスのクリックとリリースの間に発生するイベント) にスタイル シートのプロパティを設定します。 。
CSS1 では、この疑似クラスはオブジェクトに対してのみ使用できます。また、href 属性 (プロパティ) のないオブジェクトの場合、この疑似クラスは効果がありません。 CSS2 では、この疑似クラスを任意のオブジェクトに適用できます。また、:active 状態は、:link および :visited 状態と同時に発生する可能性があります。
現在、IE5.5+ は CSS1 の :active のみをサポートしています。

:link バージョン: CSS1 互換性: IE4+ NS4+
構文:
セレクター: link { sRules }
説明:
オブジェクトにアクセスする前に、オブジェクトのスタイル シート属性を設定します。
IE3 は、:link 疑似クラスのスタイル シート属性を、訪問された疑似クラスに適用します。
デフォルト値はブラウザによって決定されます。
href 属性 (プロパティ) のないオブジェクトの場合、この疑似クラスは機能しません。

:visited バージョン: CSS1 互換性: IE4+ NS4+
構文:
Selector: Visited { sRules }
説明:
リンク アドレスが訪問されたときにオブジェクトの古いスタイル シート属性を設定します。
IE3 は、:link 疑似クラスのスタイル シート属性を、訪問された疑似クラスに適用します。
デフォルト値はブラウザによって決定されます。 Web ページの有効期限を定義したり、ユーザーが履歴をクリアしたりすると、この疑似クラスの機能に影響します。
href 属性 (プロパティ) のないオブジェクトの場合、この疑似クラスは機能しません。
２:hover と a:visited の書き込み順序の重要性
今日、a:hover 属性を使用すると、同じページ内の一部のリンクの a:hover 効果が正常に表示されないという奇妙な問題を発見しました。リンクコードは同じですが、それを修正するために他のスタイルが使用されていないため、混乱しています。特定のタブが閉じていないのが原因かとも思いましたが、ページがかなり長く、確認するのが面倒でしたが、よく考えた結果他に理由が見当たらなかったので、そのままブラウザを閉じて別の作業をしました。
このページを再度開いたら、突然リンクのa:hover効果が再び出ていることに気づきました。しばらく考えてリンクをクリックし、振り返ってもう一度クリックすると、案の定、またリンクが消えていました。早速 CSS ドキュメントを確認したところ、訪問前に a:hover 属性が記述されていたことがわかり、書き直した後、再度試してみたところ、問題ありませんでした。
以前本を読んでいたときに、CSSでリンクのパフォーマンスについて書くときに、属性の順序は逆にできないという注意事項があったことに気づきましたが、普段はあまり意識せずに書いていました。この順序は今でも非常に重要であるようです。
CSS におけるハイパーリンクの 4 つの属性の通常の順序は、リンク、訪問済み、ホバー、アクティブです。つまり、

a:link
a:visited
a:hover
a:active

A:link { color: #000000; TEXT-DECORATION: none}A:visited { COLOR: #000000; TEXT-DECORATION: none}A:hover { COLOR: #ff7f24; text-decoration: underline;}A:active { COLOR: #ff7f24;   text-decoration: underline;}

Lingmoo より引用●第一炉沈香ブログ

a:link、a:hover、a:visited CSS を定義する際の異なるordersは、異なるリンク表示効果に直接つながります。
その理由は、ブラウザが CSS を解釈するときに従う「近接原則」にあると思います。

例:
未訪問のリンクの色を青、アクティブなリンクの色を緑、訪問済みのリンクの色を赤にしたい:

最初のケース: 定義した順序は a:visited、a:hover、a です。リンクでは、未訪問の青いリンクにマウスを置くと緑色にならず、訪問済みの赤いリンクにマウスを置くと緑色に変わります。

2 番目のケース: CSS 定義の順序を次のように調整しました: a:link、a:visited、a:hover この時点では、マウスオーバーしたリンクが訪問済みかどうかに関係なく、緑色に変わります。

これは、マウスが通過する未訪問のリンクが a:link 属性と a:hover 属性の両方を持っているためです。最初のケースでは、a:link がそれに最も近いため、最初に a:link を満たし、重複した定義を破棄します。 a:ホバー。
2 番目のケースでは、リンクが訪問されているかどうかに関係なく、最初に a:hover の基準を満たしているかどうか (つまり、マウスがその上を通過したかどうか) がチェックされ、満たされている場合は緑色に変わります。満たされない場合は、条件を満たす定義が見つかるまで検索が続けられます。

一文: CSS では、同じ要素に対して異なる条件の定義がある場合、最も一般的な条件を一番上に配置し、下に移動して、一番下の条件が最も特殊な条件になるようにすることをお勧めします。
このようにして、ブラウザーは要素を表示するときに、特殊な条件から一般的な条件まで段階的に検証し、作成したすべての CSS ステートメントが影響を受けるようにします。
もちろん、意図的に順序を乱した場合には、特殊な効果も発生します。たとえば、リンクの下線の色とテキストの色に違いを作成できます。

最近、この CSS の問題がすでに専門家によって提起されていることを突然知りました。やはり外国人です。彼は、覚えやすい「愛憎原則」(LoVe/HAte) を要約しました。これは、4 つの疑似カテゴリー、LVHA の頭字語です。
正しい順序をもう一度繰り返します: a:link、a:visited、a:hover、a:active

最終経験値追加:

1.Moを超えて使用する「未訪問のリンク」には a:link と a:hover の両方があり、後者の属性は前の属性定義を上書きします

2。 :visited と a:hover の 2 つの属性、後者の属性は前の属性 を上書きします

; したがって、a:hover の定義は a:link と a:visited の後ろに配置する必要があります。 、、