Firefox 的 userContent.css 被网站的 CSS 覆盖

Question

为了覆盖我正在开发/调试的特定网站的样式，我在 Firefox 上设置了一个userContent.css样式表。该样式表有点用，只是样式表的优先级对我来说似乎不对。

当我打开 Firefox 的检查器工具时，我看到来自的样式userContent.css已正确导入，但这些样式被视为浏览器的默认样式。这些样式在优先顺序中被推得很低。来自网站 CSS 的样式出现在我的来自的样式之上userContent.css。

例如，.container { ... }来自我的userContent.css将被来自.container { ... }站点的相同选择器覆盖，因此.container { ... }来自我的userContent.css将被忽略。

如果我想用 覆盖网站的样式userContent.css，那么我肯定会希望它的样式位于网站原始样式之上（按优先顺序），对吧？否则，我为什么要使用userContent.cssfor？

由于一些开发/调试的原因，我最好不要设置userContent.cssto be中的每个规则!important，也不想更改每个选择器（例如，从.container到body .container）。

简单地说，我只是想userContent.css覆盖网站的样式。

Answer 1

当多个样式表为元素的某个属性赋值时，冲突将按照以下方式解决： 级联规则。

顺序如下：

1. 用户代理声明（浏览器默认样式）
2. 用户正常声明
3. 作者（页面）正常声明
4. 作者（页面）重要声明
5. 用户重要声明

因此，作者（页面）!important声明胜过用户!important声明之外的一切。

userContent.css最后加载，因此具有最高优先级。如果这还不够，那么该网站就可耻地 !important在其规则中使用了该关键字，因此除了!important 您的规则之外，其他任何规则都无法覆盖它。或者您的规则可能不够具体，因为最具体的规则总是获胜。

您还可以使用 Greasemonkey/Tampermonkey 脚本!important从网站的 CSS 中删除，但这可能需要一些复杂性。