如何使链接只改变颜色一次访问

Question

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

我想要的默认样式是.btn

一旦链接被访问，我想要的样式是.btn：visited

我尝试将：visited样式移动到：hover样式的上方和下方。根据我所读到的内容，:visited样式应该高于：hover样式。但它覆盖了我想要应用到链接的默认样式,就像它现在所处的那样。

<!-- 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注释：

null

@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>