设置大纲：无，a，：hover和：active但启用浏览器默认值：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上的默认值。

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