Anchor tag inherits from unintended element

Question

I have piece of following code and a tags from header inherit a tag's styles from main.
I know that I can prevent it adding classes to each a tag, but is there any other way to solve it?

    header li{
      display: inline-block;
    }
    header a:link, a:visited, a:active{
      text-decoration: none;
      color: #fff;
    }
    header a:hover{
      color: #333;
    }
    
    main a:link, a:visited, a:active{
      color: #0ba39c;
    }
    main a:hover{
      color: #252525;
    }

    <header>
      <ul>
        <li>
          <a href="#">First element</a>
        </li>
        <li>
          <a href="#">Second element</a>
        </li>
      </ul>
    </header>
    
    <main>
      <ul>
        <li>
          <a href="#">First element</a>
        </li>
        <li>
          <a href="#">Second element</a>
        </li>
      </ul>
    </main>

I also tried pointing it like: header > ul > li > a:link... but it doesn't work as well.
I saw on sites a lot of different styled anchors without additional classes, so I bet I am missing something.

Answer 1

The CSS comma combinator is used to list multiple individual selectors.

So instead of

header a:link, a:visited, a:active {
    ...
}

(which results in 3 selectors header a:link, a:visited and a:active)

the full selector for each link state has to be declared like so:

header a:link,
header a:visited,
header a:active {
    ...
}

(which results in 3 selectors header a:link, header a:visited and header a:active)

The same goes for main. I updated your example with distinguishable colors:

    header li{
      display: inline-block;
    }
    header a:link,
    header a:visited,
    header a:active {
      text-decoration: none;
      color: red;
    }
    header a:hover{
      color: yellow;
    }
    
    main a:link,
    main a:visited,
    main a:active {
      color: green;
    }
    main a:hover{
      color: blue;
    }

    <header>
      <ul>
        <li>
          <a href="#">First element</a>
        </li>
        <li>
          <a href="#">Second element</a>
        </li>
      </ul>
    </header>
    
    <main>
      <ul>
        <li>
          <a href="#">First element</a>
        </li>
        <li>
          <a href="#">Second element</a>
        </li>
      </ul>
    </main>