为、:hover和:active设置outline:none，但为:focus启用浏览器默认值

Question

我有如下所示的按钮样式：

.submit-button {
    display: block;
    color: red;
    outline: none;
}

是否可以添加:focus状态，然后将大纲设置为浏览器默认大纲？

.submit-button:focus {
     outline: browser-default;
}

我尝试过outline: inherit;，但这对页面没有任何影响。

Answer 1

您可以使用:not()伪类，如下所示：

.submit-button:not(:focus) {
    outline: none;
}

这样做可以防止选择器覆盖:focus上的默认值。

最好的部分是，所有理解:focus的浏览器都可以理解:not()伪类。