visited link 有不需要的文字修饰

Question

我有一个 link，当我将鼠标悬停在它上面时，我希望它能转换成另一种颜色。但是，当我单击它时，它应该会恢复正常，就像我将鼠标悬停在它上面之前一样。

a {
  -o-transition:.3s;
  -ms-transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  transition:.3s;
  text-decoration: none;
  color: #ffffff;
}

a:hover { 
  text-decoration: none;
  color: #66caff; 
}

当我悬停时它工作正常，但在我访问 link 之后，我得到了不需要的下划线，并且它变成了紫色。它看起来应该和我点击它之前一样。

a:visited { 
  text-decoration: none;
  color: #ffffff; 
}

添加此项可防止发生任何颜色转换，并且访问的 link 仍带有下划线。

Answer 1

锚点（链接）上的伪类应按特定顺序声明。顺序是：Link、已访问、悬停、活动。

将您的 :visited 规则移到 :hover 规则之前，它将起作用。

片段：

a {
  text-decoration: none; color: #0f0;
  transition: all 0.3s;
}

a:visited { color: #0f0; }
a:hover { color: #f00; }

<a href="#">Link 1</a> | <a href="#">Link 2</a>

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/%3Avisited

...This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order: :link — :visited — :hover — :active.

Answer 2

代码看起来不错。我根据您的代码创建了一个 fiddle。

   HTML : 
   <a href="/">VISIT</a>

CSS 与您在问题中提到的相同。这对我来说可以。请提及 OS 和您用于测试代码的浏览器及其版本。这可能是特定版本或 OS.

的特定问题

visited link 有不需要的文字修饰

visited link has unwanted text decoration

css

css-transitions