如何恢复大纲的初始值：focus？

Question

我的应用程序中的绝大多数a都具有自定义:focus样式，因此它们具有outline: none。但是，在某些情况下，我没有一个好的自定义替代品，我想覆盖我的自定义样式并使用浏览器的默认焦点样式。

我尝试使用：

div.where-i-want-this-style a:focus {
  outline: initial;
}

但这并没有给我一个大纲。事实上，当我从级联中的较高位置移除outline: none;并切换此行时，我发现此行实际上导致大纲消失。

我的理论是initial这里实际上使用的是a的初始轮廓，而不是专注的 a。该值基本上是none。

我能提供的价值是否类似于outline: default-focus-outline？

Answer 1

为了记录，我发现在Chrome中可以使用的功能，而不是Firefox：

a:focus {
  outline-style: none;
}

div.where-i-want-this-style a:focus {
  outline-style: auto;
}

这是有效的，因为Chrome outline-style的初始值非常简单（auto），将该部分设置为none就足以禁用默认大纲。

不幸的是，Firefox似乎使用了一种截然不同的方法来设置其默认焦点样式。如果我正在阅读Firebug，它可能无法在CSS中表达，这意味着一旦覆盖它就无法将其恢复。一旦我发现我没有费心去检查任何其他浏览器。

Answer 2

我建议使用:not()删除除所需课程以外的所有链接的默认大纲。

a:not(.default-outline):focus {
    outline: none;
}

这是 full example

Answer 3

如果您定义轮廓样式，并想“恢复”为：focus上的默认用户代理样式，这将有所帮助。您会发现使用初始属性（例如.myClass：focus {outline：initial;}）的跨浏览器问题。我建议改用此属性：

.myClass:focus {
  outline: 1px dotted #212121;
  outline: 5px auto -webkit-focus-ring-color;
}

希望这会有所帮助！