In CSS, is there any way to keep the hover properties for links after overriding the normal state?

I have default properties defined for my links like this:

a{
    color: blue;
}
a:hover{
    color:开发者_高级运维 red;
}

The problem is that I lose the all the hover properties when I do something like this:

#header a{
    color: gray;
}

So to keep the hover working as I defined it before in the defaults, I'd have to declare it again:

#header a:hover{
    color: red;
}

Is there any way to do this without loosing the original hover action defined?

Unfortunately, if you want it to work in all browsers, you'll have to override it.

a { color:blue; }
a:hover { color:red; }

#header a { color:grey; }
#header a:hover { color:red; }

Example.

Alternatively, you can make use of !important. Usually this is a sign that something weird is going on in your css, but this seems to be the only alternative to duplicating your css.

a { color:blue; }
a:hover { color:red !important; }

#header a:hover { color:red; }

Example.

You could also make use of a css compiler such as sass or less which would let you write it in a manor where you aren't duplicating effort - but that's beyond the scope of this question.

You're over-riding the styles with a cascade. Putting "#header a" gives that style more weight than the original style. You can over-ride it with a !important (although I wouldn't recommend it). Here's an article that explains this concept.

One way you can do this is to specify the default style as !important.

Using !important is usually a sure fire sign that your code can be improved however in this context, and without re-defining the styles, it seems like the best choice (best I know of right now).

a:hover{
    color:blue !important;
}

Working Example

Also note that if you do go down the route of using the specific selector that you can combine both selectors together to reduce code duplication.

a:hover, #header a:hover{ color: red;}