a:hover not working
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.
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).