Bootstrap 为什么：focus覆盖：focus-visible？

iugsix8n 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(1)|浏览(149)

: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没有显示。当我检查按钮并执行Force element state：focus时，它显示（如预期）：

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

型
当我执行Force element state：focus-visible时，我得到了：focus-visible的样式。但是，当我切换到按钮时，:focus-visible没有显示。如果我在dev tools中取消选中button:focus:not(.focus-visible)，:focus-visible将显示在选项卡上。据我所知，:focus不应该覆盖:focus-visible，那么我做错了什么？任何帮助都非常感谢！

twitter-bootstrap

来源：https://stackoverflow.com/questions/76636954/why-is-focus-overriding-focus-visible

1条答案

按热度按时间

o2gm4chl1#

基本上，这就是正在发生的事情：https://jsfiddle.net/eaL3vrmf/

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;
}

个字符
好吧，那就specificity问题。button:focus:not(.focus-visible)具有特异性0-2-1，而您的button:focus-visible只有0-1-1（https://specificity.keegan.st）所以你需要增加你自己选择器的特异性（除非你想使用jucky !important）一个简单的方法让你的选择器和现有的选择器一样专一，是添加一个类选择器-或一个:not()与一个无意义的类的按钮将永远不会得到在现实中。

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;
}

Test:
<button>I am a button</button>

如果你的规则在框架中的现有规则之后，这将起作用--因为现在两个选择器都有相同的特异性。如果不是这样的话，那么你就需要增加你自己的一个更具体的。

赞(0）回复(0）举报 2023-08-01

我来回答

Bootstrap 为什么：focus覆盖：focus-visible？

1条答案

相关问题

热门标签

最新问答