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

标签 css google-chrome google-chrome-extension

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

例如,如果我尝试这个

article {
    background-color: red;
}

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

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

Chrome dev tools

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

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

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

最佳答案

article {
  background-color: red !important;
}

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

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

关于css - 让你的 chrome 扩展的样式表覆盖网站的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58427822/

相关文章:

html - 有没有办法取消一个已经没有值的webkit?

html - 如何完全拉伸(stretch) 2 个嵌入式 div?

css - 在 IE11 中使用安装的字体与 webfont 时打开 Sans 字体更粗

jquery - 带有 jquery ui 的 tinymce 的两个实例导致 chrome 页面挂起并且没有响应

google-chrome - 如何查看已安装的 Chrome 扩展程序的存储空间?

javascript - Chrome 扩展程序 - 单击扩展程序、新选项卡和重定向

javascript - 如何在弹出页面和后台页面之间进行通信并存储我已经获得的信息?

css @font-face 不会在所有浏览器中垂直对齐文本

google-chrome-extension - 当我单击 Google Chrome 扩展程序的弹出图标时,如何触发内容脚本运行?

javascript - Selenium ChromeDriver 如何点击 x,y 像素位置为负的元素? C#