：動作しないホバー

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ファイルがあることを教えてください。

Answer 1

IDセレクタ（#logout）は、タイプセレクタ（a）プラス擬似クラス（:hover）、より特異的であるので、最初のルールセットは常にwin the cascade。

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

Answer 2

の簡素化：

あなたはこのアンカーに適用する2つのCSSルールを持っています。

両方のルールによって色が変わります。

適用できるルールは1つだけです。 1つの色しか選択できません。

ブラウザは、ID（#logout）に基づくルールとエレメントタイプ（<a>）に基づくルールのいずれかを選択する必要があります。

この状況では、IDに基づくルールが勝ちます。 IDの指定は、型（アンカー）のすべての要素を指定するよりも具体的です。あなたは階層順序に従う必要が

Answer 3

：

リンク、ホバーは、例えば

を訪問：

a:link 
{ 
text-decoration:none; 
color:#008b45; 
} 

a:hover 
{ 
margin-bottom: 3px solid #ff7400; 
    background:white; 
} 

a:visited 
{ 
color:#ee9a00; 
}