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 ...，但效果也不佳。
我在网站上看到了很多样式不同的锚，而没有其他类，所以我敢打赌我会丢失一些东西。

Answer 1

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

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

Answer 2

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>

锚标记从意外元素继承

2 个答案: