如何禁用站点上的一个特定CSS文件，并将其替换为本地版本？

Question

我正在尝试仅使用CSS重新设置现有网站的外观。我将采用他们的一个CSS文件并重新编写它以匹配新设计，而不更改任何HTML。我想要一种不断更新然后测试的好方法，但我必须在本地进行，因为它们没有开发环境。该网站本身是动态的，经过身份验证，因此我不能只从网站下载页面并在本地测试整个内容。我希望有一种方法可以告诉我的浏览器（最好是Firefox）禁用该特定的远程CSS文件并将其替换为本地文件。

我不想使用像Web Develop Toolbar或Firebug这样的东西，因为这需要我每次加载页面时手动进行更改。我想要更无缝的东西。

我在想一种可能性是在userContent.css中加载我的新样式表，但我仍然需要一种告诉浏览器不要从服务器加载原始样式表的方法。

有什么想法吗？

更新：我发现此Mozilla错误报告https://bugzilla.mozilla.org/show_bug.cgi?id=208641讨论了在不重新启动Firefox的情况下更改userContent.css的问题。其中一张海报（Simon Wilper）发布了一些关于添加菜单项以刷新userContent.css的文件和信息，但是它讨论了修改browser.xul而我在我的系统上找不到该文件。这似乎是最后一块拼图。

Answer 1

您可以使用AdBlock Plus创建自定义过滤器来阻止该特定样式表，因此在您访问该网站时不会加载。此规则将始终有效，因此当您刷新页面时，您将不必执行任何额外操作。

https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/

至于将自己的样式表添加到该外部网站，您可以使用Stylish，一个用于将自己的样式表添加到特定域的附加组件。当您刷新页面时，这也将始终存在。

https://addons.mozilla.org/en-US/firefox/addon/stylish/

我想，您将遇到的问题将是如何处理您打算在CSS中链接的图像。您必须将它们上传到某处，绝对引用它们，然后在完成后，将URL替换为其服务器上的新位置。此外，在他们的编辑器中编辑时尚样式表非常差（没有代码着色，没有代码完成。）可能更好地在您选择的编辑器中编辑它，然后将其粘贴到Stylish textarea中。点击保存，然后看你的工作（我相信你甚至不必刷新，但我可能错了。）

此外，这些附加组件也可用于Chrome。

https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en

Answer 2

安装Web开发人员扩展程序

http://chrispederick.com/work/web-developer/firefox/

然后它会在地址栏下创建一个菜单，点击css标签，然后点击“禁用样式”＆gt;禁用单个样式表“＆gt;然后选择要禁用的样式表文件

之后，再次单击css选项卡，然后单击“添加用户样式表”，然后选择您的css文件。

Answer 3

我不确定为什么有人建议为此简单任务安装扩展程序。我建议您按照以下步骤操作，以禁用要在浏览器中加载的文件。只需遵循以下几个简单步骤：

1. 点击Ctrl + Shift + C进行开源检查
2. 导航至Network标签
在列表中的任何文件上
3. Right Click，然后单击阻止请求URL

现在该文件将无法加载。干杯！

PS：：对于Google Chrome和Mozilla Firefox浏览器，步骤相同。未经Opera和/或Safari的测试。