vue-router:如何禁用 router-link 的 css 的大纲属性作为
Posted
技术标签:
【中文标题】vue-router:如何禁用 router-link 的 css 的大纲属性作为【英文标题】:vue-router: how to disable outline property of css of router-link as a 【发布时间】:2019-04-03 10:16:05 【问题描述】:我想禁用链接元素中的 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
【问题讨论】:
路由器链接中添加了哪些其他类/样式? 仅限“页面链接”。 【参考方案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>
【讨论】:
【参考方案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:如何禁用 router-link 的 css 的大纲属性作为的主要内容,如果未能解决你的问题,请参考以下文章