Question

好的，我收到了以下风格的链接

a:link, a:visited {
    background-color: white;
    color: black;
    border: 2px solid green;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
        background-color: green;
        color: white;
}

这对所有普通链接都有好处

但是，对于此特定链接，我不希望它从当前的默认样式继承任何内容。我希望它使用其他样式，所以我使用了id选择器

#otherLink, #otherLink:visited {  
  color: blue;
  text-decoration:none;
  font-weight: bold;
}

#otherLink:hover, #otherLink:active {
  color: red;
}

然后我设置

var userName_a = document.createElement('a');

userName_a.setAttribute( 'id', 'otherLink' );

问题是otherLink的某些样式受userName_a影响，但其他当前默认链接样式仍会影响userName_a。

那么，如何使特定链接不受其当前默认样式的影响？

Answer 1

清除属性的唯一方法是在辅助选择器中将它们重新声明为initial，即background-color：initial;

Answer 2

我能看到的唯一方法是返回基本样式并使用NOT伪类来排除具有特定ID的锚点。

a:link:not(#otherLink), a:visited:not(#otherLink) {
    /*styles*/
}

这不太理想，但我希望你知道这个选项。

Answer 3

这是yor html。

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
      a.normal{
        text-decoration: none;
        color:blue;

      }
      a.normal:hover{
        color:green;
      }

      a.special{
        text-decoration: none;
        color: red;
      }

      a.special:hover{
        color:yellow;
      }
    </style>
</head>
<body>

<a href="" class="normal">HOME</a>
<a href="" class="normal">ABOUT</a>
<a href="" class="special">DEFAULT</a>


</body>
</html>

然后，当您对js中的特殊链接的呼叫始终使用a.special和正常a.normal

时

如何使特定链接不受其当前默认样式的影响？

3 个答案: