如何使用Firebug轻松找到哪个css文件定义了特定的风格 [英] How to use Firebug to easily find which css file defines a particular style

问题描述

也许我只是一个Firebug的新手，或者也许有一些其他更好的工具？但我想轻松找到几个链接的CSS文件中的哪一个，定义了一个特定元素的风格。

Maybe I'm just a Firebug newbie, or maybe there is some other better tool? But I'm trying to easily find which of several linked css files, defines a specific element's style.

例如在生产环境中，我可以确定一个名为left -tab应用于特定元素，并适当呈现。在开发环境中，在HTML中应用相同的样式，但是不能像在生产中那样呈现。

For instance in a production environment I can pinpoint that a style named left-tab is being applied to a specific element, and it renders properly. In the development environment the same style is applied within the HTML, but is not being rendered the same way as in production.

生产和开发环境都包括9个css文件。我想轻松找到哪一个定义样式的左键。使用CSS选项卡我可以打开甚至（临时）编辑这些，但是如何搜索这些？

The production and development environments each include 9 css files. I want to easily find which one defines the style left-tab. Using the CSS tab I can open and even (temporarily) edit each of these, but how do I search through these? Ctrl-F searches the HTML document itself, as opposed to the CSS contained within the Firebug pane.

推荐答案

激活HTML文档本身，而不是包含在Firebug窗格中的CSS。右侧面板Style | Computed | Layout | DOM。对于每个CSS规则，都会有一个蓝色的链接mystyles.css（line 22）。你可以通过激活Element Inspector快速跳转到一个规则（在最左边的框w /鼠标，热键是 Ctrl + Shift + C 。使用Element Inspector突出显示您的元素（也可以单击它），将显示所有应用的CSS规则）。

Activate the style tab in the right panel "Style | Computed | Layout | DOM ". For every CSS rule, there will be a blue link "mystyles.css (line 22). You can quickly jump to a rule by activating Element Inspector (The box w/ mouse on the far left hand, hotkey is Ctrl + Shift + C. Highlighting over your element with Element Inspector (you can also click on it) will show you all the CSS rules that apply (or were overwritten).

这篇关于如何使用Firebug轻松找到哪个css文件定义了特定的风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！