css - 访问过的链接有不需要的文字修饰

Question

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

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; 
}

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

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

添加这个可以防止发生任何颜色转换，并且访问过的链接仍然带有下划线。

Answer 1

anchor (链接)上的伪类应该以特定顺序声明。顺序是:链接、已访问、悬停、事件。

将您的 :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.