css - 让你的 chrome 扩展的样式表覆盖网站的 CSS

Question

我正在编写一个 Chrome 扩展来修改特定页面的 CSS。虽然，当我尝试使用 style.min.css 应用样式时，我的电子表格在级联中网站的电子表格之前呈现。准确地说，我的规则先于他们的规则计算，因此他们的规则优先于我的规则。

例如，如果我尝试这个

article {
    background-color: red;
}

他们的规则是最后计算的，我的背景不会是红色的。

这就是开发工具的样子。我们可以看到我注入(inject)的样式表在级联中没有优先级。

这也是我的 manifest.json 没有元素描述和名称。

"content_scripts": [{
      "css": ["style.min.css"],
      "js": ["main.js"],
      "matches": ["https://intra.epitech.eu/*"]
 }],
 "permissions": ["tabs"]

因此，如果有人对如何通过在 chrome 扩展程序中确定您的样式的优先级来解决这个问题，请发表评论 :)

Answer 1

article {
  background-color: red !important;
}

!important 标签阻止其他样式覆盖您的样式。

尽管如此，您还是应该轻而易举地使用 !important 标签。因为如果你过度使用它，当你的 CSS 文件变得非常大时，你将开始遇到样式冲突。