3

私はこれを見つけました：

注: a:hover を効果的にするには、CSS 定義で a:link および a:visited の後に指定する必要があります!!

注: a:active は、有効にするために、CSS 定義で a:hover の後に来る必要があります!!

注: 疑似クラス名では、大文字と小文字が区別されません。

これは間違っているということですか？

a:link, a:visited, a:active {
color: #006699;
text-decoration: none;
}

a:hover {
color: #2089CC;
text-decoration: underline;
}

悲しいことに、ソースは次のとおりです。 http://www.w3schools.com/css/css_pseudo_classes.asp

「悲しいことに」の理由がわからない場合は、http: //w3fools.com にアクセスしてください。

4

3 に答える 3

4

疑わしいときはいつでもスペックに行きます。そして、これが仕様からの抜粋です。

A：hoverはA：linkおよびA：visitedルールの後に配置する必要があることに注意してください。そうしないと、カスケードルールがA：hoverルールの「color」プロパティを非表示にするためです。

あなたが持っているものは正しい

a:link, a:visited, a:active {
   color: #006699;
   text-decoration: none;
}

a:hover {
   color: #2089CC;
   text-decoration: underline;
}

これが機能する理由です。

以下のこれは正しくありません。

a:hover {
   color: #2089CC;
   text-decoration: underline;
}

a:link, a:visited, a:active {
   color: #006699;
   text-decoration: none;
}

これが機能しない理由です。

于 2011-11-16T22:36:48.610 に答える
3

各疑似クラスのスタイルを含める提案された方法では、各疑似クラスが最後のものをオーバーライドすることはできません。このようにスタイルを組み合わせると、それらは単にグループとしてまとめて適用されます。

たとえば、:active疑似クラスが最後に来るので、それがオーバーライド:focusするか、その:hover前の疑似クラスになります。これは、リンクがクリックされたときにアクティブになることを想定し、ユーザーがまだリンク上にカーソルを置いている間に新しいスタイルを適用したい場合に意味があります。

正しい順序は次のとおりです。

a:link {
  ⋮ declarations
}
a:visited {
  ⋮ declarations
}
a:focus {
  ⋮ declarations
}
a:hover {
  ⋮ declarations
}
a:active {
  ⋮ declarations
}

ここで少し安心してください。

于 2011-11-16T22:33:38.950 に答える