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.