:焦点应该覆盖:焦点可见样式吗?

Question

:focus样式应该覆盖:focus-visible吗？

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

我的:focus-visible样式已成功与我的大多数按钮元素一起使用，但不适用于我的"注销"按钮，其中某些 Twitter 引导focus样式覆盖了我自己的focus-visible样式，尽管引导导入语句的优先级较低。

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

更新：下面是指向 DevTools 屏幕截图的链接，其中列出的前 3 个样式表是 node_modules 文件夹中的标准引导程序。 第四个样式表是我自己的样式表，它试图只设置:focus-visible元素的样式。 开发人员工具摘要的屏幕截图

网页按钮：

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

我的 CSS：

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

Bootstrap CSS：

.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的回答(顺便说一句，谢谢！我发现添加以下代码片段确实实现了我的目标，即让按钮显示focus-visible样式而不是focus样式，但是，我仍然不清楚为什么原始代码不起作用导致我需要这种额外的样式。

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

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

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