html - 这是 Chrome 中的“全局”：焦点选择器吗？我可以覆盖它吗？

Question

我正在使用 React 16 和 Emotion 10.0.7。Emotion 库是一个 CSS-in-JSS 库，可以与用于样式组件的 React 一起使用。我让他们一起工作并为组件设计样式。在大多数情况下，我的 CSS 被认为是“更具体”的，并且会像人们期望的那样覆盖其他 CSS。

我正在尝试:focus从按钮中删除轮廓。我知道这是不受欢迎的，但我被要求为一个工作项目做这件事。

我的问题是这个。我已'outline: none'在组件级别的 Emotion CSS 标记中指定。这被翻译成一个类，:hover伪选择器应用于该类，然后被 Chrome 中明显的“全局” :focus 选择器覆盖（我可以在 Chrome 开发工具中看到删除线）。

我将图中的选择器称为“全局” :focus 选择器，因为没有更好的术语。通常会指示 CSS 来自何处（用户代理、、some_file.css 等），但此处框的右上角是空的。

这是:hover伪类的全局 Chrome 选择器吗？我可以覆盖它或以某种方式绕过它吗？global_hover_selector_chrome

标签： htmlcssreactjsemotion