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与您的链接，那么这就是它应该起作用的方式。
如果页面的锚点在浏览器的历史记录中存在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>

如何使链接仅在访问后才更改颜色

1 个答案: