【问题标题】:vue-router: how to disable outline property of css of router-link as avue-router:如何禁用 router-link 的 css 的大纲属性作为
【发布时间】: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

【问题讨论】:

  • 路由器链接中添加了哪些其他类/样式?
  • 仅限“页面链接”。

标签: css vue.js vue-router


【解决方案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>
    

    【讨论】:

      猜你喜欢
      • 2019-12-06
      • 2021-08-04
      • 2019-01-14
      • 2017-05-26
      • 2018-11-08
      • 2020-03-28
      • 1970-01-01
      • 2020-04-05
      • 2021-10-16
      相关资源
      最近更新 更多