如何不删除规则取消outline:none;？WordPress主题焦点样式重置

我太懂你这个痛点了——主题硬给各种元素加了outline:none;干掉了focus状态的原生轮廓，想恢复浏览器自带的默认样式，试了inherit和initial都没反应，只有手动设border能看到效果，但这完全不是你想要的原生体验对吧？

为啥你之前的尝试没生效？ #

先给你拆解下原因：

• outline: inherit !important;：这个是继承父元素的outline样式，但绝大多数父元素本身就没设置outline，自然继承不到任何有效样式
• outline: initial !important;：这个是用CSS规范定义的初始值（比如outline-width是medium、color是currentColor），但浏览器的默认focus轮廓是它自己的用户代理样式，和CSS初始值不是一回事，所以没法还原原生效果

正确的解决方案 #

要让浏览器彻底恢复原生的focus轮廓，你需要用专门还原默认样式的属性，这里有两个靠谱的选项：

方案1：用revert（优先推荐）

revert会直接让样式回退到浏览器的用户代理默认样式，完美还原原生focus的交互效果：

*:focus {
  outline: revert !important;
}

方案2：用auto（兼容旧浏览器备选）

如果你的网站需要兼容极旧的浏览器（比如IE11及更早，不过现在这类浏览器占比极低），可以用auto，它会让浏览器自动应用默认的focus轮廓样式：

*:focus {
  outline: auto !important;
}

安全添加CSS的方式（不用改父主题） #

不用动父主题的文件，你有两个安全的操作途径：

• 进入WordPress后台 → 外观 → 自定义 → 额外CSS，把代码粘贴进去保存即可
• 如果你在用子主题，直接在子主题的style.css文件末尾添加这段代码

这样就能完美覆盖主题的outline:none;设置，同时保留浏览器原生的focus交互，对无障碍访问也更友好！

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