:visited text-decoration 没有按预期工作

Question

尝试在我的页面顶部添加一个按钮，用于滚动到同一页面上的一篇文章。当它被点击时，按钮周围有一个不需要的蓝色方块。

我尝试了很多 :visited with outline 的组合：none;和文字装饰：none;

谁能告诉我删除蓝色外线的正确方法

<a href="#article1" class="page-scroll">
  <button class="btn btn-heading btn-lg">
    <span class="fa fa-chevron-down"></span>
    <span class="fa fa-chevron-down"></span>
    <span class="fa fa-chevron-down"></span>
  </button>
</a>

Answer 1

您可以在如下标签处使用'outline: none'；

.page-scroll:active, .page-scroll:focus{
    outline:none !important;
}

如果上述方法不起作用。您可以像下面这样使用；

.btn{outline:none !important;}

但如果您这样做，网络可访问性就会丢失。 a 标签不能用 tab 键聚焦。所以希望大纲可以留在那里

我使用 !important 的原因。我认为您的 CSS 被另一个 CSS 覆盖了。请使用 Chrome 开发者工具检查元素。

:visited text-decoration 没有按预期工作

:visited text-decoration not working as desired

html

css

visited