无法将CSS outline重置为浏览器默认样式的问题求助

嘿，我懂你的困扰——本来以为initial能一键还原浏览器默认的聚焦轮廓，结果完全没效果，反而写死具体样式就管用，这确实有点坑。

问题出在你对initial关键字的理解偏差上：它不是恢复浏览器的默认样式，而是把属性重置为CSS规范定义的初始值。而outline属性的初始值恰恰就是none，这就等于你又把它设回了和全局样式一样的状态，自然看不到任何变化。

那该怎么找回浏览器原生的聚焦样式呢？给你两个靠谱的方案：

• 用outline: revert!important;：这个关键字的作用是让属性恢复到用户代理（也就是浏览器）的默认样式，正好就是你想要的原生聚焦框。现代主流浏览器（Chrome、Firefox、Edge、Safari 14.1+）都支持它，是最省心的选择。

• 用outline: auto!important;：如果需要兼容更老的浏览器，auto值会让浏览器自动应用默认的聚焦样式，兼容性比revert更好，而且效果和原生完全一致。

另外补充一句：你用!important来覆盖全局样式的思路是对的，因为全局的*:focus已经加了!important，后续的样式必须也带!important才能获得更高优先级，这点你没做错～

内容的提问来源于stack exchange，提问作者sayayin