锚标签从意外元素继承

Question

我有以下代码和header的标签从main继承标签样式。
我知道我可以防止它在每个标签中添加类，但是还有其他方法可以解决吗？

    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：链接...但它也不起作用。
我在网站上看到了很多不同的样式锚，没有其他类别，所以我敢打赌我缺少一些东西。

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>

Answer 2

您并使用其属性以这种方式调用特定的锚标签

a[href="abc"]{
    /*your css property*/
}