a:hover not working

问题:

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;
}

Though the color of logout appears to be what is given in the css , the color doesn't change when i place my mouse over the link (to white) . What is the reason ?

I must tell there are other css files that tend to change the color of the link when the mouse is placed over them and they work fine.

回答1:

An id selector (#logout) is more specific then a type selector (a) plus a pseudo-class (:hover), so your first ruleset will always win the cascade.

Use #logout:hover instead.

回答2:

Simplifying:

You have two CSS rules that apply to this anchor.

Both rules change the color.

Only one rule can apply; only one color can be chosen.

The browser has to choose between the rule based on an ID (#logout) and a rule based on the element type (<a>).

The rule based on ID wins in this situation. It is more specific to specify an ID than to specify all elements of a type (anchor).

回答3:

You have to follow a hierarchy sequence:

Link, Hover, Visited

For example:

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

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

a:visited
{
color:#ee9a00;
}