I want my link's active state to be blue and not have any outlines or borders. However my focus state does have an outline which seemingly overrides the :active {outline: none;} property.

How do I set the active state so that it does not have any outlines or borders?

  :active {
    color: blue;
    outline: none;
    border: none;
  }

  :focus {
    outline: 2px solid green; 
  }

CodePudding user response：

CSS is mainly about specificity.

1. !important postfix

2. Inline CSS

3. Most specific case (by selectors)

4. Order of CSS

5. Externally referenced styles

Changing the order here works because of the top-down rule of specificity. If both are equal, the last declaration wins.