如何通过 Dev-Tools 或 Firebug 一次添加多个 css 规则答案

【问题标题】：How to add multiple css rules at once through Dev-Tools or Firebug如何通过 Dev-Tools 或 Firebug 一次添加多个 css 规则
【发布时间】：2015-07-23 05:23:01
【问题描述】：

我有 300 行 CSS，其中包含我需要在页面上测试的许多规则。

我希望将规则一次性粘贴到页面正在使用的 main.css 的底部 - 或者将伪“extra-main.css”表添加到包含我的规则的页面。

我目前无法访问页面的源代码，因此我必须在实时页面上工作。我知道不完美。

最好的方法是什么？ Firebug、DevTools (Chrome) 等等……

【问题讨论】：

在开发工具上检查某些内容时，您会在元素的右上角看到原始 CSS 源名称。单击它并粘贴您的 CSS，然后按 CTRL+S 即可查看实时更改。

标签： css firebug google-chrome-devtools

【解决方案1】：

在 Chrome DevTools 的 Elements 面板中单击元素的源，粘贴到 CSS 中进行测试，然后按 Ctrl + S 来查看更新。您可以单击页面上要测试的任何元素，只要 CSS 源文件影响它。

【讨论】：

正确。至于替换浏览器本身中的 SCSS 文件将采用无法识别的格式。您需要编译 SCSS 文件，然后在适当的位置使用输出的 CSS。

【解决方案2】：

在 Firebug 中它类似于 Chrome DevTools，我刚刚发现。

打开 Firebug
选择 CSS 选项卡
选择您要编辑的 css 文件
选择实时编辑

【讨论】：

除了动画图像之外，您还应该添加一些描述如何粘贴 CSS 的步骤。