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/

相关文章:

jquery - 如何根据鼠标位置偏移元素?

google-chrome - 使用 CSS 转换后文本模糊 : scale(); in Chrome

javascript - 为什么会保存sendMessage的内容以及如何禁用它?

javascript - 在chrome扩展中获取 "Remote Address"(IP地址)

macos - 如何使用 Applescript 检查 Chrome 是否在隐身模式下运行?

javascript - 使用 chrome 扩展覆盖用户定义的函数以使用 native 函数

javascript - 我如何用太多的嵌套函数优化这段代码?

html - 当两个 div 使用自动边距居中时,如何将一个 div 放在另一个之上?

javascript - 仅使用部分 jQuery Mobile

javascript - jQuery 捕获 "RangeError: Maximum call stack size exceeded"