Hover Problem in CSS -- Overwriting

Question

Okay this is the css code I put on the master page so it applies all the child page as well :

Master.css

a
{
  color:Red;
}

a:hover
{
  color:Blue;
}

and now on some pages I need to change color and hover color of the links like :

Some child pages

a
{
  color:Gray;
}

a:hover
{
  color:Maroon;
}

But the problem is it won't change the way I defined later. I used specific id and class approaches but they also don't work.

When I wanna change some specific element style, I use inline style attribute to do it but now :hover comes into play and I don't think I can declare it inline.

Answer 1

I used specific id and class approaches but they also don't work.
Can you clarify? Using specific selectors is the way to go. An example.

There I define common a look for the whole page.

a {
  color:Red;
}

and custom style for specific areas where I want it to apply.

.new-look a {
  color: Gray;
}

Answer 2

your HTML markup is equally important.

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

a.foo { color:green; }
a.foo:hover { color:black; }

<a href="#">red</a>
<a href="#" class="foo">green</a>

will work, unless something else is at play.

or as the other post suggests ~

.foo a { color:red; }
#bar a:hover { color:blue; }

remember IDs take priority over classes.

Answer 3

CSS chooses between conflicting specifications by how specific the declaration is.

You can increase the specificity by specifying classes, ids, or adding !important to the end of your css declaration. For example:

a:hover
{
  color:Maroon;
}

will be overridden by

a.link:hover
{
  color:Blue;
}

will be overridden by

#link1:hover
{
  color:Red;
}

will be overridden by

a:hover
{
  color:Green !important ;
}