How can I exclude a specific element from inheriting CSS rules?

I have this CSS:

a {
  color:#19558D;
  padding:3px 5px;
  text-decoration:none;
}

a:h开发者_运维百科over {
  background-color:#D1E1EA;
  color:#19558D;
  text-decoration:none;
}

It applies to all links, but what if I don't want it to apply to a specific link on the page? What can I do?

There are two ways you can do this.

First way is to use the :not() selector and give your link that you don't want the styles applied to class:

a:not(.unstyled):hover {
  background-color:#D1E1EA;
  color:#19558D;
  text-decoration:none;
}

However, the :not() selector is not supported in IE8 or less, so the second option is to give your unstyled links a class, and override those properties for that link with that class:

a.unstyled:hover {
  background-color:none;
  color:#000
  text-decoration:none;
} 

You can apply your own class or inline style to the link in question.

for example:

<a href="#" class="MyNewClass" />

or

<a href="#" style="color:red;" />