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

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