首页 > 解决方案 > vue-router:如何禁用 router-link 的 css 的大纲属性作为

问题描述

我想禁用链接元素中的 CSS 轮廓。我可以禁用 css 类的大纲,但不能禁用<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

标签: cssvue.jsvue-router

解决方案


尝试这个:

.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>

推荐阅读