a:hover not working

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

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.

Answer 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.

Answer 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).