html - anchor 标记继承自非预期元素

Question

我有一段以下代码，header 中的一个标签继承了 main 中的标签样式。
我知道我可以阻止它向每个 a 标签添加类，但是还有其他方法可以解决吗？

    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>

我也试过像这样指向它:header > ul > li > a:link...但它也不起作用。
我在网站上看到很多不同风格的 anchor ，没有额外的类，所以我敢打赌我错过了一些东西。

Answer 1

CSS 逗号组合器用于列出多个单独的选择器。

所以代替

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

(这导致 3 个选择器 header a:link、a:visited 和 a:active)

必须像这样声明每个链接状态的完整选择器:

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

(产生 3 个选择器 header a:link、header a:visited 和 header a:active)

main 也是如此。我用可区分的颜色更新了您的示例:

    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>