How to stop a CSS rule from applying to a specific element [duplicate]

Question

I have a CSS rule like so:

a {
  line-height: 50px;
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  color: white;
}

And this HTML:

<a href="/test">test</a>

How can I stop the CSS rule applying to just this element?

Answer 1

If a selector matches an element, then it matches the element.

You have three options:

• Change the selector so it doesn't match
• Change the element so it doesn't get matched
• Write another CSS ruleset which falls further down the cascade, and override every property you don't like in the first ruleset with a new value.