html - :visited text-decoration not working as desired

Question

试图在我的页面顶部有一个按钮，可以滚动到同一页面上的一篇文章。当它被点击时，按钮周围有一个不需要的蓝色方 block 。

我尝试了很多 :visited 与 outline: 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;}

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

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