css - 设置大纲 :none for 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 上的默认值。

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