html - 锚标签继承自非预期元素

Question

我有一段以下代码，并且标头中的标签从 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:link... 但它也不起作用。
我在网站上看到了很多不同风格的锚，没有额外的类，所以我敢打赌我错过了一些东西。

标签： htmlcssstyling

Answer 1

您并使用他们的属性以这种方式调用特定的锚标记

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