如何使链接只在访问后改变颜色

Question

当我在我的代码中应用原始样式之后的访问样式时，：visited样式会覆盖默认样式，这不会产生链接已被访问的效果。

我想要的默认样式是.btn

访问链接后我想要的样式是.btn：visited

我试过移动：访问样式在：悬停样式的上方和下方。从我所读到的，：访问过的样式应该高于：悬停样式。但它会覆盖我想要应用于链接的默认样式，就像它现在的样子一样。

<!-- I want this styling to be the default -->
.btn {
  margin-left: 10px;
  margin-right: 10px;
  background-color: darkgrey;
  color: darkred;
}

<!-- I want this styling to be applied only once visted -->
.btn:visited {
  color: orange;
}


.btn:hover {
  /* Applies to links under the pointer */
  font-weight: bold;
  background-color: darkgrey;
  color: darkred;
}

我的预期结果是链接具有深灰色和深红色的文本颜色。

实际结果是链接只有橙色文本颜色，我只是在访问链接后才想要。

Answer 1

你所展示的东西不起作用的一个原因是因为<!-- -->不是有效的CSS评论并完全打破下一个规则（因为

<!-- ... -->
some-selector

...与some-selector不匹配）。

然而，/* ... */是一个有效的CSS评论：

@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css);

/* I want this styling to be the default */
.btn {
  margin-left: 10px;
  margin-right: 10px;
  background-color: darkgrey;
  color: darkred;
}

/* I want this styling to be applied only once visted */
.btn:visited {
  color: orange;
}


.btn:hover {
  font-weight: bold;
  background-color: darkgrey;
  color: darkred;
}

<a class="btn" href="#test">test</a>

注意：请勿在隐身模式下测试:visited！因为在那种模式下没有任何东西被保存在历史中，因此没有什么可以是:visited。 要正确测试，请确保您未处于隐身模式并清除缓存（浏览历史记录）。

---

如果您的问题是浏览器确实记住了哪些链接你:visited，那么，这就是它应该如何工作。 如果页面中的锚点具有href，该:visited存在于浏览器的历史记录中并且:visited状态被设置为风格（具有高于当前应用样式的特异性），则将应用:visited样式。这是预期的行为。如果要更改其工作方式（不推荐），请不要以不同方式设置

$('.btn').on('click', function(){
  $(this).addClass('visited');
})

的样式，并在用户交互上应用自定义类。

例：

@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css);

/* I want this styling to be the default */
.btn {
  margin-left: 10px;
  margin-right: 10px;
  background-color: darkgrey;
  color: darkred;
}

/* I want this styling to be applied only once visted */
.visited {
  color: orange;
}


.btn:hover {
  font-weight: bold;
  background-color: darkgrey;
  color: darkred;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a class="btn" href="#test">test</a>

qazxswpoi