0

クラス「menu_top」のヘッダーに2つのリンクがあるため、次のようになります。

<a class="menu_top" href="adverteerders.html"  >adverteerders</a>
<a class="menu_top" href="ondernemers.html"  >ondernemers</a>

対応するcssコードは次のとおりです。

.menu_top {
    font-size: 14px; 
}
.menu_top:link {color: #404040;}
.menu_top:hover {color: #CC0033;}
.menu_top:visited {color: #404040;}

このコードを実行して「adverteerders」にマウスを合わせると、色が変わりません。マウスを「ondernemers」に合わせると、奇妙なことに変化します。だから私がしたことは、起業家の正確なコードをコピーした後、それは再び機能するように見えました。今、私が「ondernemers」を「adverteerders」に書き直すと、は再び機能しません。ただし、oadverteerders.htmlと入力すると、ホバーが機能します。

ここで何が起こっているのですか？

4

1 に答える 1

1

CSSセレクターの順序が重要です。要素が同じ特異性を持つ複数のCSSセレクターと一致する場合、後で定義されたセレクターが前のセレクターをオーバーライドします。

したがって、:visited疑似クラスの後に:hover疑似クラスを使用すると、:visitedスタイルがスタイルよりも優先され、:hover競合する場所でスタイルがオーバーライドされます。

そのため、通常はの後に:hoverと:activeスタイルを定義する必要があります:visited。

于 2013-03-15T17:40:34.727 に答える