对 <a> 链接使用不同的类答案

【问题标题】：using different class for <a> links对 <a> 链接使用不同的类
【发布时间】：2018-03-26 13:34:09
【问题描述】：

我想为正文文本中的链接与页脚区域中的链接使用不同的字体颜色。我在

中添加了这个

.footer-widgets a, a:link, a:visited {
    color: #6fabad;
 }

正文是

a, a:link, a:visited {
   color: #6fabad;
   font-weight: 600;
   text-decoration: none;
}

正文仍显示为页脚字体颜色。我该如何解决这个问题？

【问题讨论】：

请提供您的 HTML
因为颜色相同？在您的代码中，它们都是 #6fabad。
如果您的页脚在<body> 之外，请执行body a:link{ code }。此外，.footer-widgets 必须位于您在逗号之后添加的所有元素之前。

标签： css fonts colors hyperlink

【解决方案1】：

如果颜色不同，您的代码将不起作用：

两个链接的颜色都与正文样式相同。因为.footer-widgets 样式将在a:link样式的右边。

.footer-widgets a,
a:link,
a:visited {
  color: red;
}

a,
a:link,
a:visited {
  color: #6fabad;
  font-weight: 600;
  text-decoration: none;
}

<body>
  <a href="#"> hi</a>

  <div class="footer-widgets">
    <a href="#"> hi</a>
  </div>
</body>

您已将 CSS 更改为：

这样a:link 将被.footer-widgets a:link 覆盖，a:visited 被.footer-widgets a:visited 覆盖，只有这样你的代码才能 100% 正常工作。

.footer-widgets a,
.footer-widgets a:link,
.footer-widgets a:visited {
  color: red;
}

a,
a:link,
a:visited {
  color: #6fabad;
  font-weight: 600;
  text-decoration: none;
}

<body>
  <a href="#"> hi</a>

  <div class="footer-widgets">
    <a href="#"> hi</a>
  </div>
</body>

希望对你有帮助。

【讨论】：

我已将正文链接设置为#6fabad（蓝绿色），这就是网络检查器工具所说的，但它在 Mac 上的 Firefox 中仍显示为黑色。似乎是 Mac/Windows/浏览器的问题，链接的颜色在机器和浏览器之间没有一致性。感谢您的帮助。
@jenburg 我也在使用 Mac，所以没有这样的错误，但你检查过我的小提琴它工作正常吗？