Question

我有一个奇怪的问题。我在这里创建了一个与contacter类的链接 -

（现在不在此计算机上编辑脚本，因此无法复制/粘贴），我无法更改a href的外观。

该页面链接到2个样式表。我已经尝试了多种变体（在一个href里面放一个p，把一个div放在一个div里面等）但是这个：

.contacter {
color: white;
}

有效地改变了chrome中的链接外观。问题是它在Safari中没有任何作用。我觉得这里有些奇怪的事情发生了。在我发现的chrome调试器中 -

这似乎导致了问题，但我到处寻找，找不到这个用户代理样式表。如何更改链接的外观？问题是继承吗？我该如何解决？

Answer 1

您需要为锚点指定不同的选择器，因为有不同的方式来设置它们的样式，并且处于不同的状态。 user agent stylesheet是浏览器的内部样式。这些与浏览器到浏览器不同，重置它们以保持一致性通常是个好主意 - 请参阅CSS Reset

如果您希望链接在所有状态下都是特定颜色，则可以将选择器组合使用相同的属性，如下所示。如果您希望每种状态的样式不同（强烈建议），请添加单独的选择器，但在组合选择器中共享公共属性以防止重复。

我使用contacter类来防止链接更改在应用程序中是全局的。

<!DOCTYPE html>
<html>
   <head>
      <style type="text/css">
         a.contacter:link,
         a.contacter:visited,
         a.contacter:hover,
         a.contacter:active {
            color: #FFF;
            text-decoration: none;
         }
      </style>
   </head>
   <body>
      <a class="contacter" href="mailto:">contact the creators</a>
   </body>
</html>

Answer 2

以下是如何在W3Schools

上正确设置链接样式的示例

基本上，您可以使用这些选择器：

a:link {
}

/* visited link */
a:visited {
}

/* mouse over link */
a:hover {
}

/* selected link */
a:active {
}

至于user agent stylesheet - 这是最低限度的默认样式Chrome和/或任何其他浏览器用于以某种方式呈现内容，缺少重写样式。你无法找到它们 - 它们被包含在浏览器中。

CSS适用于Chrome但不适用于Safari？无法改变href的外观？

2 个答案: