使用 Firefox 单击并编辑 CSS？答案

【问题标题】：Click and edit CSS with Firefox?使用 Firefox 单击并编辑 CSS？
【发布时间】：2014-05-08 16:55:28
【问题描述】：

我希望能够点击网页的一部分并查看 CSS 标记。

它使用什么 CSS 规则、类、id 等，并且能够实时编辑它们。

我已经安装了Firebug 和网络开发者插件，但是我不知道怎么做。

【问题讨论】：

【解决方案1】：

您需要在页面上单击鼠标右键并选择“检查元素”。

或者，您可以选择工具栏上的“检查元素”选项，当您将鼠标悬停在页面上的项目上时，您鼠标下方的任何内容都会立即显示在 Firebug 窗口中。从这里您可以查看/编辑/操作底层的 html 和 css。

上面的链接可以参考 Firebug 的站点，wiki 也有很好的信息。

【讨论】：

【解决方案2】：

Right Click->Inspect Element..... 只需右键单击要查看的元素并选择检查元素...

【讨论】：

【解决方案3】：

使用 firebug，右键单击并选择检查元素。

使用 Web Developer 工具栏，点击 CSS，然后从下拉菜单中点击 Edit CSS。

【讨论】：

【解决方案4】：

安装 firebug 后，右键单击要选择的元素，然后单击检查元素。

使用 Web Developer Toolbar，按 ctrl+shift+f 打开勾勒框和显示元素的东西。

为了在检查元素后在 firebug 中编辑文档，您只需通过单击单个元素或添加新元素来更改值。请注意，如果没有额外的插件，这些数据将不会被保存。

这里有使用firebug的指南：http://getfirebug.com/html

【讨论】：

【解决方案5】：

您可以使用 Firebug 来检查正在使用的内容。在网络上查找文档应该不会太难，一旦您有了想法，您就可以轻松地选择元素，查看它们应用的样式以及它们的来源（包括继承和覆盖）。

还有非常棒的 Web Developer Toolbar，有很多可能性：

您可能需要一些时间来尝试所有这些并找到您的任务真正需要的那些，但了解元素结构和已经应用到它的 CSS 会很有帮助。

Firebug 也允许进行一些编辑，但还有另一个工具，EditCSS

它会打开一个边栏，其中包含所有已经存在的 CSS，您可以在边栏中对其进行编辑（根据需要更改、删除或添加内容）。

所有都可以结合，firebug 和 web 开发人员了解已经存在的内容和 EditCSS 进行实时编辑。

【讨论】：