Question

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

我尝试过 *：focus {outline：none！important}

Answer 1

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

您可以使用no-key-nav道具禁用键盘导航（这也会从选项卡内容区域中删除-1的tabindex）。

如果使用样式/类删除轮廓，并且样式已确定范围，则需要使用vue-loader的Deep selector，因为通常无法在组件中定位子组件的子元素：

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

如果希望作用域样式中的选择器“较深”（即影响子组件），则可以使用>>>组合器。

[...]

某些预处理器（例如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]属性选择器仅应用于根类选择器，而不应用于任何子类选择器。

Answer 2

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

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