我正在编写一个 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 扩展程序中确定您的样式的优先级来解决这个问题,请发表评论 :)
最佳答案
article {
background-color: red !important;
}
!important 标签阻止其他样式覆盖您的样式。
尽管如此,您还是应该轻而易举地使用 !important 标签。因为如果你过度使用它,当你的 CSS 文件变得非常大时,你将开始遇到样式冲突。
关于css - 让你的 chrome 扩展的样式表覆盖网站的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58427822/