Css 为什么：focus 会覆盖：focusvisible

发布于07月07日

我对:focus-visible和Bootstrap有意见.我正在工作的项目使用Bootstrap，它有button:focus:not(:focus-visible)和button:focus:not(.focus-visible)两个按钮.在我的css中，我有:

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

但我的:focus-visible美元没有显示出来.当我判断按钮并执行强制元素状态:Focus时，它显示(如预期的):

button:focus:not(:focus-visible) {
  outline: 0;
}
button:focus:not(.focus-visible) {
  outline: 0; //crossed out
}

当我执行强制元素状态:焦点-可见时，我得到了我的样式:焦点-可见.但是，当我按Tab键到按钮时，没有显示:focus-visible.如果我在开发工具中取消选中button:focus:not(.focus-visible)，则选项卡上会显示:focus-visible.就我所知，:focus不应该超越:focus-visible，那么我做错了什么呢？如有任何帮助，不胜感激！

button:focus:not(:focus-visible) { outline: 0; } /* The :focus-visible works if this is removed */ button:focus:not(.focus-visible) { outline: 0; } button:focus-visible { outline: 2px dashed hotpink; }

button:focus:not(:focus-visible) { outline: 0; } /* The :focus-visible works if this is removed */ button:focus:not(.focus-visible) { outline: 0; } button:not(.never-ever-gonna-be-set):focus-visible { outline: 2px dashed hotpink; }

Css 为什么：focus 会覆盖：focusvisible

推荐答案

Css相关问答推荐

在react native中应用阴影

添加Angular 17的Stackblitz项目的Angular material 主题？

如何为垫子制作圆角- Select 所有角点上的下拉列表

VueJS CSS动画不会扩展到v-card/v-col之外

如何在元素上打孔才能看到下面的背景图像？

尽管 URL 路径正确，但背景图像未显示

如何更改导航栏标题中链接的文本 colored颜色和导航丸中的链接(在shiny 的应用程序中)？

如何使用props 为 Vue 中的组件创建动态背景图像？

我怎样才能将我的按钮向上移动，因为文本是

在revealjs/Quarto中定义一类反背景的幻灯片

BootStrap：右对齐嵌套手风琴

如何测试页面上的文本被删除

使用border-radius CSS时平滑边框

用 svelte 设计 body 元素

隐藏元素，但显示 CSS 生成的内容

完成后如何防止css3动画重置？

如果容器 div 较小，如何将子 div 扩展到 100% 屏幕宽度？

如何根据容器大小设置字体大小？

CSS显示：表格列应该如何工作？

谷歌的无图像按钮