vue-router：如何禁用 outline 属性 of css of router-link 作为

Question

我想在 link 元素中禁用 css 的轮廓。我可以通过 css class 禁用 a 的轮廓，但我不能禁用 <router-link> 的轮廓。如何禁用大纲？

.page-link, .page-link:visited, .page-link:hover, .page-link:active, .page-link:focus {
    outline: 0 none !important;
    border: 0;
}

<div>
    <!-- worked -->
    <a class="page-link">normal link</a>
</div>
<div>
    <!-- not worked -->
    <router-link to="" class="page-link">router-link</router-link>
</div>

浏览器：

Chrome

Answer 1

试试这个：

.page-link, .page-link:visited, .page-link:hover, .page-link:active, .page-link:focus {
  outline: 0 none !important;
  border: 0;
}

<div>
  <router-link to="">
    <a class="page-link">normal link</a>
  </router-link>
</div>

Answer 2

避免使用 !important amap

.page-link, .page-link:visited, .page-link:hover, .page-link:active, .page-link:focus 
{
  outline: unset;
  border: unset;
}

<router-link to="" class="page-link">router-link</router-link>

vue-router：如何禁用 outline 属性 of css of router-link 作为

vue-router: how to disable outline property of css of router-link as a

css

vue.js

vue-router