css - 更改链接 CSS 颜色而不更改 :hover color

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 中可能吗？

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

Answer 1

你的 :link 前面有类，所以 it is more specific ，悬停当前位于 :link 之前，因此颜色被 :link 颜色覆盖。

Here is a neat Specificity Calculator .

施加限制

复制 :hover 并将类放在它之前，以增加其特异性。确保使用 LVHA order (: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 order (:link, :visited, :hover, :active) (强调我的):

   The :link CSS pseudo-class lets you select links inside elements. This will select any link, even those already styled using selector with other link-related pseudo-classes like :hover, :active or :visited. In order to style only non-visited links, you need to put the :link rule before the other ones, as defined by the LVHA-order: :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>