css - 如何使链接仅在访问后改变颜色

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 注释:

@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 ，嗯，这就是它应该如何工作的。
如果页面中的 anchor 有 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>