[経験] CSS_html/css_WEB-ITnose で a:link、a:visited、a:hover、a:active の順序を定義する

学部生のクラスメートの最近のプロジェクトで、CSS を使用するときにこの問題に遭遇したことはありませんでした。いくつかの問題が発生しました。いくつかの Web サイトや検索エンジンの情報を調べたところ、多くの人がこの質問をしていることがわかりました。その結果を試してみましたが、ほとんどが間違っていました。

皆さんの役に立つかもしれません:

コード

A:link {
color : #000000 ;
TEXT-DECORATION : none
}
A:visit編 {
色 : #000000 ;
テキスト装飾 : なし
}
A:hover {
COLOR : #ff7f24 ;
テキスト装飾 : 下線 ;
A:active {
COL : #ff7f24 ;
}

今日、匿名の友人からの質問を見て、いくつかの情報を確認しに行きました。この人は非常に詳しく話しました：Lingmuより引用●最初の沈香ブログ

a:link, a:hover、a:visited。CSS を定義するときの異なる

order

は、異なるリンク表示効果に直接つながります。 その理由は、ブラウザが 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 の問題がすでに専門家によって提起されていることを突然知りました。やはり外国人です。彼は、覚えやすい「愛憎原則」(Lo Ve/H Ate) を要約しました。これは、4 つの疑似カテゴリ、LVHA の頭字語です。
再度正しいシーケンスを繰り返します：a：link、a：visited、
：hover
、a：active。 " 「未訪問のリンク」には 2 つの属性があります: a:link と a:hover

。後者の属性は前の属性定義を上書きします;

2。マウスが通過する「訪問済みのリンク」にも

があります。

a :visited と a:hover

は 2 つの属性です。後者の属性は前の属性

を上書きします。そのため、a:hover の定義は a:link と a: の後に配置する必要があります。訪問しました、、、

著作権表示: この記事はブロガーによるオリジナル記事であり、ブロガーの許可なく複製することはできません。