找出影响特定元素的类

Question

有没有办法确切地看到哪个声明正在影响元素。而不是查看Firebug检查器中的一百万个属性，这取决于分配了多少类，可能包含许多优先级较低但因此未应用的声明。找到实际影响元素的特定声明可能会很长。我看到长期忽略的声明如下：

ul {
      颜色：绿色;
}
“计算样式”将显示所有层次结构的最终结果，但不会显示样式派生的位置。也许我错过了一些简单的事情。非常感谢！

JSBIN

编辑： 我听说我应该能够在Computed标签中扩展属性，但是我没有看到该选项可用的位置。我可以看到font-size是13.333px，但没有选项可以看到它的来源。

Answer 1

是的，在Firebug中选择元素，然后单击“计算”选项卡（查看HTML框架时）。在这里，您将看到一个CSS属性列表，而不是可以展开以显示相关CSS的位置。

Answer 2

Computed side panel可以为您提供此信息。

请注意，它只显示CSS跟踪 - 即影响特定CSS属性的样式 - 这些属性实际上是由样式表的CSS规则更改的。虽然它可以显示元素的所有计算值。要隐藏未更改的选项，您可以取消选中显示用户代理CSS 选项。

另外请确保您安装了当前版本的Firefox（当前稳定版为20.0.1）。 Firebug内部使用一些API进行样式跟踪，这些API仅适用于较新版本的Firefox。

Answer 3

在Chrome DevTools中有“计算样式”面板，其中显示了元素属性及其位置的样式列表。例如，请参阅text-decoration属性的屏幕截图。