不改变:hover颜色，如何更改链接CSS颜色

Question

这是我以前从未遇到过的情况：

/* These first two rules are in a CSS library */
a { 
  color: #1EAEDB;
}

a:hover { 
  color: #0FA0CE;
}

/* This rule is my own */
.example a:link {
  color: #000;
}

<div class="example">
  <a href="http://stackoverflow.com/doesntexist">StackOverflow</a>
</div>

我想只改变链接的 :link 状态的颜色，而不影响 :hover 状态。在 CSS 中是否有可能实现这一点？

前两个规则来自库，因此我无法更改它们或它们的顺序。

- nathancahill

Answer 1

您的:link前面有类名，因此它更具体，而悬停效果当前放在:link前面，因此颜色被:link的颜色覆盖。

这是一个简洁易懂的特异性计算器。

受到限制时

复制:hover并将类名放在其前面，以增加其特异性。确保使用LVHA顺序（:link，:visited，:hover，:active）。

a {
  color: #1EAEDB;
}
a:hover {
  color: #0FA0CE;
}
.example a:link {
  color: #000;
}
.example a:hover {
  color: #0FA0CE;
}

<div class="example">
  <a href="http://stackoverflow.com/doesntexist">StackOverflow</a>
</div>

正确的方法 - 没有限制

1. 使用 .example a:hover。

2. 将 :hover 放在 :link 之后。确保您使用LVHA 顺序（:link, :visited, :hover, :active）(我强调了):

   :link CSS 伪类允许您选择元素内的链接。这会选择任何链接，即使那些已经使用其他链接相关伪类（如 :hover、:active 或 :visited）进行样式化的链接。为了仅对未访问的链接进行样式化，您需要将 :link 规则放在其他规则之前，如 LVHA 顺序所定义的：:link — :visited — :hover — :active。

工作示例

a {
  color: #1EAEDB;
}
.example a:link {
  color: #000;
}
.example a:hover {
  color: #0FA0CE;
}

<div class="example">
  <a href="http://stackoverflow.com/doesntexist">StackOverflow</a>
</div>

- misterManSam

---

我应该指出，前两个规则来自CSS库。我不能更改它们或它们的顺序。 - nathancahill

创建自己的悬停效果并在其前面放置类。 - misterManSam

有趣，感谢您的回答。仍然认为.example a:link改变了a:hover很奇怪。 - nathancahill

@nathancahill - 这样想：链接始终是链接，即使在悬停时也是如此。在您的示例中被覆盖的唯一样式是文本颜色。如果您在悬停时给示例一个背景颜色，这将不会被链接覆盖。如果您将.example a:link和a:hover放入Specificity Calculator中，您将看到链接得分更高，因此无论在示例中的位置如何，它都会获胜。 - misterManSam

Answer 2

你必须提供:hover CSS。

.example a:link {
  color: #000;
}
.example a:hover{
  color: #0FA0CE;
}

因为 .example a:link 比 a:hover 更加具体。

---

让我们看看 specificity 是如何工作的：

Selector (per selector)          |Specificity    |     Specificity
----------------------------------------------------------------
inline-style                     | 1 0 0 0       |      1000
id selector                      | 0 1 0 0       |       100
class,pseudo,attribute selector  | 0 0 1 0       |        10
type selector and pseudo elements| 0 0 0 1       |         1   
------------------------------------------------------------------   

所以，.example a:link 等于 10+1+10 = 21 ，a:hover 等于 1+10=11。

因此，在提供了 :hover 后，特异性值将相等，但最后一个规则将被 CSS 接受。

- Bhojendra Rauniyar

Answer 3

.example a:not(:hover) {
    color: #000;
}

它能够完成任务！

- Luiz Gustavo Martins

---

如果您解释一下提供的代码如何回答问题，那么这将是一个更好的答案。 - pppery

Answer 4

我认为问题在于你的悬停样式的顺序和具体性。这个是有效的：

{
  color: #1EAEDB;
}

.example a:link {
  color: #ff00ff;
}

.example a:hover {
  color: #38ce33;
}

- Scott Simon