为何:focus会覆盖:focus-visible？Bootstrap聚焦样式问题

问题根源 #

核心矛盾在于：Bootstrap的button:focus:not(.focus-visible)规则会在Tab聚焦时触发——现代浏览器支持原生:focus-visible伪类，但不会自动给元素添加.focus-visible类，导致这个规则匹配后设置outline: 0。而你自定义的:focus-visible样式和Bootstrap的规则优先级相同，若Bootstrap代码后加载，就会覆盖你的样式。

解决方案 #

1. 提升自定义样式优先级

通过增强选择器特异性，让你的样式优先级高于Bootstrap规则：

// 结合:focus伪类提升权重
button:focus:focus-visible {
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
}

// 若使用Bootstrap的.btn类，直接用类选择器增强权重
.btn:focus-visible {
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
}

应急场景下也可使用!important（不推荐长期使用）：

button:focus-visible {
  outline: var(--outline-size) var(--outline-style) var(--outline-color) !important;
}

2. 覆盖Bootstrap的冲突规则

利用特性查询，仅在支持原生:focus-visible的浏览器中重置Bootstrap的冲突规则：

@supports selector(:focus-visible) {
  button:focus:not(.focus-visible) {
    outline: initial;
  }
}

这样既保留Bootstrap对旧浏览器的兼容逻辑，又不会干扰现代浏览器的原生:focus-visible样式。

3. 引入:focus-visible polyfill

如果需要兼容不支持原生:focus-visible的旧浏览器，引入对应的polyfill脚本。它会在键盘聚焦元素时自动添加.focus-visible类，让Bootstrap的button:focus:not(.focus-visible)规则不再匹配，你的自定义样式即可正常生效。

内容的提问来源于stack exchange，提问作者pistevw