在 safari 浏览器中单击时，bootstrap vue（b-tabs）显示蓝色轮廓答案

【问题标题】：bootstrap vue (b-tabs) shows blue outline when clicked in safari browser在 safari 浏览器中单击时，bootstrap vue（b-tabs）显示蓝色轮廓
【发布时间】：2019-12-05 16:56:03
【问题描述】：

我正在使用引导 vue 组件，在 safari 浏览器中单击后，b-tabs 显示轮廓蓝色焦点边框，它在 chrome 和 Mozilla 上工作正常

我试过了

*:focus {outline:none !important}

【问题讨论】：

标签： css bootstrap-4 vue-component bootstrap-vue

【解决方案1】：

b-tabs 默认启用键盘导航，以使选项卡组件仅可供键盘和屏幕阅读器用户访问。 WAI-ARIA 对选项卡式内容的建议建议将选项卡的内容区域的 tabindex 指定为 -1，以便屏幕阅读器用户可以轻松跳转到该区域。

您可以使用 no-key-nav 属性禁用键盘导航（这也会从标签内容区域中删除 -1 的标签索引）。

https://bootstrap-vue.js.org/docs/components/tabs#keyboard-navigation

如果使用样式/类来删除轮廓，并且你的样式是作用域的，你需要使用 vue-loader 的Deep selector，因为通常你不能在你的组件中定位子组件的子元素：

https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements:

使用scoped，父组件的样式不会泄漏到子组件中。但是，子组件的根节点会同时受到父级的作用域 CSS 和子级的作用域 CSS 的影响。这是设计使然，以便父级可以为子根元素设置样式以进行布局。

https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements:

如果您希望范围样式中的选择器“深”，即影响子组件，您可以使用>>> 组合器。

[...]

某些预处理器，例如 Sass，可能无法正确解析 >>>。在这些情况下，您可以改用 /deep/ 或 ::v-deep 组合器 - 两者都是 >>> 的别名，并且工作方式完全相同。

<style scoped>
.tabs /deep/ .tab-pane:focus {
  outline: none;
}
</style>

这将被转换为以下（或类似的）：

.tabs[data-v-f3f3eg9] .tab-pane:focus { outline: none; }

请注意，[data-v-xxxxx] 属性选择器仅适用于根类选择器，而不适用于任何子类选择器。

【讨论】：

【解决方案2】：

对于最新的标签，这很好用。

.nav-tabs .nav-link:focus {
  outline: none;
}

【讨论】：