html - a: ホバーが機能しない

Question

HTML

 <table width="100%">
<tr>
    <td width="90%"></td>
    <td><a href="#" id="logout"><strong>Logout</strong></a></td>
 </tr>
</table>

CSS

@charset "utf-8";
/* CSS Document */

#logout {
color:#BBB;
}

a:hover {
color:#FFF;
}

ログアウトの色はcssで指定されているように見えますが、リンクの上にマウスを置いても色は変わりません(白に)。理由は何ですか？

マウスがそれらの上に置かれたときにリンクの色を変更する傾向がある他のcssファイルがあり、それらは正常に機能することを伝えなければなりません。

score 23 · Accepted Answer

id セレクター ( ) は、タイプセレクター ( ) と疑似クラス ( )#logoutよりも具体的であるため、最初のルールセットは常にカスケードを獲得します。a:hover

#logout:hover代わりに使用してください。

score 2 · Accepted Answer

簡略化：

このアンカーに適用される2つのCSSルールがあります。

どちらのルールも色を変更します。

適用できるルールは1つだけです。選択できる色は1つだけです。

ブラウザは、ID（#logout）に基づくルールと要素タイプ（<a>）に基づくルールのどちらかを選択する必要があります。

この状況では、IDに基づくルールが優先されます。タイプ（アンカー）のすべての要素を指定するよりも、IDを指定する方が具体的です。

4 に答える 4