css - 显示内联 css 类或 id 定义的 Firefox 扩展？

Question

我使用 Firebug 和 Web Developer Firefox 扩展。我正在寻找但我不确定它们是否存在于这些扩展中的一项功能是，当我查看网页源代码时，我想单击一个类或 ID 名称，然后在某处显示该类或 ID 的定义。不是 css 继承层次结构。仅特定类或 id(如果存在)

例如:

.....我点击“header”，我得到了 css 定义，或者它告诉我没有。我想过滤 css 树层次结构以仅显示该类。

任何扩展都可以做到这一点？

Answer 1

Firebug can do that .打开 HTML 选项卡，选择您感兴趣的元素。查看样式选项卡下 Firebug 窗口的右侧框。在那里，您将看到通过 id、类或任何其他类型的选择器应用于元素的每种样式。您还可以查看布局选项卡以查看所选元素的偏移量、边距、填充和宽度。

例如，在 StackOverflow 上，当我点击 body 元素时，我看到以下内容:

body {           /* File: all.css?v=3496 (row 1) */
    background:#FFFFFF none repeat scroll 0 0;
    color:#000000;
    font-family:Arial,Helvetica,sans-serif;
    font-size:80%;
    text-align:center;
}
body {           /* File: all.css?v=3496 (rad 1) */
    line-height:1;
}
/* + A lot of reset styles for all elements */