使用 Firefox 单击并编辑 CSS？
I want to be able to click on a part of a webpage and see the CSS markup.
What CSS rules it uses, the class, id, etc. and be able to edit them live.
I have installed Firebug and web developer plug-ins, but I don't know how to do this.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
您需要右键单击页面并选择“检查元素”。
或者，您可以选择工具栏上的“检查元素”选项，当您将鼠标悬停在页面上的项目上时，鼠标下方的任何内容都将立即显示在 Firebug 窗口中。从这里您可以查看/编辑/操作底层 html 和 css。
http://getfirebug.com/html
http://getfirebug.com/wiki/index.php/Main_Page
上面的链接可能引用到 Firebug 站点，并且 wiki 有很好的信息以及。
You need to right click over the page and select "Inspect Element".
Alternatively, you can select the "inspect element" option on the toolbar and as you hover over items on the page, whatever is beneath your mouse will be instantly revealed within Firebug window. From here you can view/edit/manipulate the underlying html and css.
http://getfirebug.com/html
http://getfirebug.com/wiki/index.php/Main_Page
The above links may be referenced to the site for Firebug and the wiki has pretty good information as well.
右键单击->检查元素.....只需右键单击您想要查看的元素并选择检查元素...Right Click->Inspect Element..... Just do a right click on the element you want to see and select Inspect Element...使用 firebug，右键单击并选择检查元素。
使用 Web Developer 工具栏，单击 CSS，然后从下拉菜单中单击编辑 CSS。
Using firebug, right click and select inspect element.
Using Web Developer toolbar, click on CSS, then click Edit CSS from the dropdown menu.
安装 Firebug 后，右键单击要选择的元素，然后单击检查元素。
使用 Web 开发人员工具栏，按 ctrl+shift+f 打开概述框并显示元素的内容。
为了在检查元素后在 firebug 中编辑文档，您只需通过单击各个元素或添加新元素来更改值。请注意，如果没有额外的插件，这些数据将不会被保存。
这里有一个使用 firebug 的指南：http://getfirebug.com/html
With firebug installed right-click the element that you want to select and click inspect element.
With Web Developer Toolbar, push ctrl+shift+f to open up the thing that outlines boxes and shows elements.
In order to edit the document in firebug after doing inspect element, you just change the values by clicking on the individual elements or adding new elements. Be aware that without extra plugins this data won't be saved though.
There is a guide to using firebug here: http://getfirebug.com/html
您可以使用 Firebug 检查正在使用的内容。在网络上找到文档应该不会太难，一旦您掌握了想法，您就可以轻松选择元素，查看它们应用的样式以及它们的来源（包括继承和覆盖）。
还有非常好的 Web 开发人员工具栏，具有很多可能性：
https ://addons.mozilla.org/en-US/firefox/addon/web-developer/
您可能需要一些时间来尝试所有这些并找到您的任务真正需要的那些，但它是有助于理解元素结构和已经应用到它的 CSS。
Firebug 还允许进行一些编辑，但还有另一个工具，
EditCSShttps://addons.mozilla.org/en-US/firefox/addon/editcss/
它会打开一个侧边栏，其中包含已存在的所有 CSS，您可以在侧边栏中对其进行编辑（更改、删除或根据需要添加内容）。
所有这些都可以组合起来，Firebug 和 Web 开发人员可以了解已有的内容，而 EditCSS 则可以进行实时编辑。
You can use Firebug to inspect what is being used. It should not be too hard to find documentation on the web, and once you get the idea you can easily select elements, see their applied styles and from where they came (including inheritance and overwrriting).
There is also the very good Web Developer Toolbar with a lot of possibilities:
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
It could take you some time to try them all out and find the ones you really need for your task, but it is helpful to understand the element structure and the CSS that is already applied to it.
Firebug also allows some editing, but there is another tool,
EditCSShttps://addons.mozilla.org/en-US/firefox/addon/editcss/
It opens a sidebar with all the CSS that is already there and you can edit it in the sidebar (change, remove or add stuff as you desire).
All can be combined, firebug and web developer to understand what is already there and EditCSS for live editing.