`:focus-visible` 是否应该覆盖 `:focus` 样式？

Question

:focus 样式是否应该覆盖 :focus-visible？

我正在尝试使站点键盘可访问，并尽可能应用我自己的 :focus-visible 样式。

我的:focus-visible 样式已成功地与我的大多数按钮元素一起使用，但无法与我的“注销”按钮一起使用，其中一些 twitter 引导程序 focus 样式覆盖了我自己的 focus-visible 样式，尽管有引导导入语句优先级较低。

如何使:focus-visible 样式的优先级高于:focus 样式？

更新： 下面是 DevTools 屏幕截图的链接，其中列出的前 3 个样式表是 node_modules 文件夹中的标准引导程序。 第 4 个样式表是我自己的，它试图设置 :focus-visible 元素的样式。 Screenshot of Devtools summary

HTML 按钮：

`<button id="logOut" class="btn btn-dark btn-block mt-2" (click)="onLogout()"><i class="fa fa-sign-out-alt"></i>Log out</button>`

我的 SCSS：

`:focus-visible {
    background-color: #143a84;
    color: #fff;
}`

引导 SCSS：

`.btn-dark:focus, .btn-dark.focus {
    color: #212529;
    background-color: #cdcdcd;
    border-color: #c7c7c7;
    box-shadow: 0 0 0 0.2rem rgb(195 196 197 / 50%);
}`

目前，当我使用键盘点击按钮时，会应用引导程序 focus 样式，而不是我设置的 :focus-visible 样式。

Answer 1

如果您只想要:focus-visible，请尝试使用此代码。如果你想要:focus也请加#logOut.btn-dark:focus

#logOut.btn-dark:focus-visible {
    background-color: #143a84 !important;
    color: #fff !important;
        border-color: unset !important;
        box-shadow: unset !important;
}

<button id="logOut" class="btn btn-dark btn-block mt-2" (click)="onLogout()"><i class="fa fa-sign-out-alt"></i>Log out</button>



<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap-reboot.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap-grid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>

Answer 2

根据@Meghna 的回答（顺便说一句，谢谢！）我发现添加以下代码 sn-p 确实实现了让按钮显示focus-visible 样式而不是focus 样式的目标，但是，我仍然不清楚为什么原版不起作用导致我需要这种额外的样式。

`.btn-dark:focus-visible {
    background-color: #143a84;
    color: #fff;
}`

我一直在尽量避免使用!important，因为它可能会使未来的造型变得困难，并且在我所阅读的内容中被广泛建议不要使用，但再次感谢您的回答。

因此，我现在有一个修复方法，但它更多的是一种解决方法，而不是了解问题的原始根本原因。