我看过很多视频，其中开发人员在 chrome 中动态更改 CSS。我尝试了同样的事情，但 chrome 不允许我更改代码。我不能在样式表上写字。
是否有任何特定设置可以做到这一点？请帮忙。
编辑：要编辑 CSS，我右键单击一个元素，选择检查元素。它将打开控制台。我选择元素的 id 并转到资源中的 style.css 并尝试更改 CSS。它不允许我在那里写。
【问题讨论】：
标签： css google-chrome stylesheet edit
在 Chrome 中，单击 DevTools 的 Elements 选项卡的 Styles 窗格中的“all.css:1”之类的内容会转到 Sources DevTools 选项卡。如果您正在查看远程服务器上的代码，则此源视图中的 CSS 规则不可实时编辑（与 Firefox* 的实时编辑 Style Editor 选项卡不同），除非您：
查看“inspector-stylesheet”——一个临时样式表，其中包含您使用“元素”选项卡的“样式”窗格中的“+”按钮创建的新样式规则。单击新规则的“inpector-stylesheet:1”链接将带您到您创建的临时规则的可编辑源。
查看持久的本地工作区。设置它需要一些额外的步骤，如下所述："Set Up Persistence with DevTools Workspaces"。 基本上，您在您的机器上创建一个本地文件夹，您可以在其中保存您指示 Chrome 使用的本地副本，以代替 Internet 上的版本。请参阅该链接中的说明。请注意，正如那里所说，“如果您从远程服务器而不是本地服务器映射文件，则当您刷新页面时，Chrome 会从远程服务器重新加载页面。您的更改仍会保留在磁盘上，如果您重新应用继续在 Workspaces 中编辑。” （因此，如果您已刷新或导航到使用相同样式表的不同页面，只需在源本地 CSS 文件中输入一个空格字符即可再次查看应用的更改。）
* 在 Firefox 中，如果您右键单击远程网页上的元素，选择 Inspect Element，然后在 Inspector 选项卡的 Rules 窗格中，单击右侧的链接如“all.css:1”，您将被带到“样式编辑器”选项卡，您可以在其中立即进行实时编辑，这与 Chrome 要求您映射到本地文件的要求不同。如果他们期望 Chrome 的 DevTools 有相同的行为，这可能会引起一些人的困惑。
【讨论】：
另一个类似于 Stylebot 的 Chrome 扩展程序是 Code Cola。它有一个允许选择元素的检查器和一个不需要手动输入 CSS 的可视化编辑器。要查看生成的 CSS 代码，请单击工具栏中的大括号图标。
【讨论】：
您做错了...资源面板不用于实时编辑，如果您想更改与 HTML 元素关联的 css，请右键单击该元素，然后在右侧面板中您将看到 css与所选元素关联的样式。您可以编辑该规则，您将实时看到更改。
也许您可以查看some videos 了解有关 Chrome 开发者工具的一些基础知识，之后如果您想了解更多信息，可以查看以下问题：
Chrome Developer Tools: Best resource for learning advanced features?
【讨论】：
这是Google Chrome 的一个很棒的工具，叫做 Stylebot。
在此您可以更改样式表并将您自己的样式保存到任何网站，用于您自己的自定义网站主题！
这是Stylebot的链接
检查一下，锦上添花，它是免费的！
这不应该用于您自己的网站项目，因为 CSS 文件保存在您的浏览器本地！
【讨论】：