如何使用Firebug轻松找到哪个css文件定义了特定的样式

Question

也许我只是一个Firebug新手，或者也许还有其他更好的工具？但我正在尝试轻松找到几个链接的css文件中的哪一个，定义一个特定元素的样式。

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

生产和开发环境均包含9个css文件。我想轻松找到哪一个定义样式左标签。使用CSS选项卡我可以打开甚至（暂时）编辑其中的每一个，但我如何搜索这些？ Ctrl-F搜索HTML文档本身，而不是Firebug窗格中包含的CSS。

Answer 1

当您右键单击一个元素并单击“检查元素”时，右下角的框将显示该元素的CSS样式，在每个元素的上方，它会告诉您它来自哪个CSS文件以及哪个行。

Answer 2

激活右侧面板“Style | Computed | Layout | DOM”中的样式选项卡。对于每个CSS规则，都会有一个蓝色链接“mystyles.css（第22行）。你可以通过激活Element Inspector快速跳转到规则（左手边有一个带鼠标的框，热键是 Ctrl < / kbd> + Shift + C 。使用Element Inspector突出显示元素（您也可以单击它）将显示所有适用（或被覆盖）的CSS规则）。