css - a:hover が CSS でオーバーライドされるのはなぜですか?

Question

この CSS がある場合:

a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }

ID の下のリンクは、ホバー時に常に黒で表示されます。IDを使用すると優先度が高くなることは承知していますが、:hoverセレクターのみをオーバーライドしているの:linkではなく、ホバーが赤く表示されるべきではありませんか?

score 11 · Accepted Answer

疑似クラスは、:linkホバーしてもリンクに適用されます。ID のスタイルはより具体的であるため、他のスタイルをオーバーライドします。

:hoverスタイルがスタイルをオーバーライドする唯一の理由:linkは、それがスタイルシートの後半にあるからです。この順番で並べると：

a:hover { color: red; }
a:link { color: blue; }

:linkスタイルはスタイルシートの後半にあり、スタイルをオーバーライドします:hover。カーソルを合わせると、リンクは青色のままです。

スタイルを:hover黒いリンクで機能させるには、少なくともスタイルと同じくらい具体的:linkにし、スタイルシートの後に配置する必要があります。

a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }
#someID a:hover { color: red; }

score -2 · Accepted Answer

W3Schools で説明されているように、順序の問題があります。

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

注: a:active は、有効にするために、CSS 定義で a:hover の後に来なければなりません!!

2 に答える 2