0

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

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

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

如何让:focus-visible造型比:focus造型更重要？

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

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我设置的样式。

4

2 回答 2

0

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

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

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

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

于 2021-12-16T12:29:47.907 回答
0

如果您只想使用此代码，请尝试使用: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>

于 2021-12-16T12:19:47.583 回答