Html 如何在浏览器中对网站的 CSS 进行永久性更改？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25488746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make permanent changes to a website's CSS from within the browser?
提问by Solace
If I am trying to edit some CSSin a huge project using the built-indeveloper toolsin Firefox (which is accessed by right click and then selecting Inspect Element), is there a way to make those changes permanent?
如果我尝试CSS使用Firefox 中的内置开发人员工具（通过右键单击然后选择Inspect Element访问）在大型项目中编辑一些内容，是否有办法使这些更改永久化？
Actually there is a big number of style sheets and and I could not locate this one property in them? I just could not find the file which contains this property, so I want to make permanent changes to the CSS from within the browser. Is there a way?
实际上有大量的样式表，我无法在其中找到这个属性？我只是找不到包含此属性的文件，所以我想从浏览器中对 CSS 进行永久更改。有办法吗？
EDIT:-
编辑：-
采纳答案by GifCo
To set up in Chrome first you have to add your project file to a "Workspace", Go into dev tools Ctrl+Shift+I then click on the settings gear and on the left yoou should see Workspace.
要首先在 Chrome 中进行设置，您必须将项目文件添加到“工作区”，进入开发工具 Ctrl+Shift+I，然后单击设置齿轮，在左侧您应该会看到工作区。
After you have added your Project folder into a workspace close out of options and click on the "Sources" tab (still in dev tools)
将项目文件夹添加到工作区后，关闭选项并单击“源”选项卡（仍在开发工具中）
Now load up your index.html from your LocalHost like you normally would. In the sources panel you should see the currently loaded page and its resources. Right click on your .css file and click "Map To File System Resource" it will bring up a search box where you can search for the corresponding .css file from your actual project folder (that is now part of a workspace in Chrome). Once you make the link Chrome is smart enough to link up any other CSS and HTML files that are in your Project Folder.
现在像往常一样从 LocalHost 加载 index.html。在源面板中，您应该看到当前加载的页面及其资源。右键单击您的 .css 文件并单击“映射到文件系统资源”，它将弹出一个搜索框，您可以在其中从实际项目文件夹（现在是 Chrome 工作区的一部分）中搜索相应的 .css 文件。一旦你建立了链接，Chrome 就足够聪明，可以链接你项目文件夹中的任何其他 CSS 和 HTML 文件。
Now you can make changes in the Elements tab in Chrome Dev Tools and they changes will persist. Also in the ELements tab it will show you what css file and what line any given Style is originating from!
现在，您可以在 Chrome Dev Tools 的 Elements 选项卡中进行更改，并且这些更改将保持不变。同样在“元素”选项卡中，它会向您显示任何给定的样式来自哪个 css 文件和哪一行！
The best thing about this is if you use Sass or Less then it will map your Scss files back to the CSS styles being processed in Chrome. (please note if using Sass and Less you have to have CSS source maps turned on)
最好的一点是，如果您使用 Sass 或 Less，那么它会将您的 Scss 文件映射回 Chrome 中正在处理的 CSS 样式。（请注意，如果使用 Sass 和 Less，您必须打开 CSS 源映射）
回答by lalengua
You can use the Web Developer Toolbar for this matter. By going to CSS menu and then to 'Edit CSS' where you can edit and save your changes. Il also provides tools for identify which files are relevant and modify them manually. Also you may try Firebug extension where you can do similar things. Links to both here:
您可以使用 Web Developer Toolbar 来解决这个问题。通过转到 CSS 菜单，然后转到“编辑 CSS”，您可以在其中编辑和保存更改。Il 还提供了用于识别哪些文件相关并手动修改它们的工具。你也可以尝试 Firebug 扩展，在那里你可以做类似的事情。两者的链接在这里：
https://addons.mozilla.org/firefox/addon/web-developer/
https://addons.mozilla.org/firefox/addon/web-developer/
https://addons.mozilla.org/firefox/addon/firebug/
https://addons.mozilla.org/firefox/addon/firebug/
If you have installed Firebug you could install cssUpdater to simplify the process of saving changes.
如果您安装了 Firebug，您可以安装 cssUpdater 来简化保存更改的过程。
回答by lalengua
If you don't want to do this by hand, there is a plugin for FF called Stylish that allows you to define rules-based style tweaks.
如果您不想手动执行此操作，FF 有一个名为 Stylish 的插件，可让您定义基于规则的样式调整。
EDIT
编辑
I mention this only because it allows you to publish a set of style changes that any Firefox client can pick up and install to a specific installation. Since one can't "permanently" change the contents of remote style information, the only solution is to manipulate it on a semi-permanent basis on each user-agent that needs the changes.
我提到这一点只是因为它允许您发布一组任何 Firefox 客户端都可以选择并安装到特定安装的样式更改。由于不能“永久”更改远程样式信息的内容，唯一的解决方案是在每个需要更改的用户代理上半永久地对其进行操作。
回答by Uxio
You can take a look at userContent.css:
你可以看看 userContent.css：
http://www-archive.mozilla.org/unix/customizing.html#usercss
http://www-archive.mozilla.org/unix/customizing.html#usercss
