如何检测CSS继承源？

Question

到目前为止，我只能告诉属性是否继承，但是我需要知道继承的来源（例如，哪个CSS文件导致最终值？）这可能吗？

这是否有方便的工具？

修改

以下是我在chrome Computed Style中获得的内容（显示继承） 查看direction属性，没有关于其继承源的信息

Answer 1

您可以在Firefox或Chrome的开发者工具中使用Firebug轻松完成这项工作。

Chrome开发者工具

如下图所示。

有关详细信息，请查看Chrome Developer Tools: Element Styles Here

在Firebug中

如下图所示。

有关详细信息，请查看CSS Development Here

您可以安装Fire Bug From Here

更新1：

您只需点击Chrome的Show Inherited面板上的computed style复选框即可找到它。

更新2：

在Firebug中，你只需点击我在图片下方显示的继承元素。然后它会引导你到相关的Inherited元素的位置。

P.S。 - 使用Chrome工具也可以。

Answer 2

CSS的级联性质使得Elements Tab中的样式浏览器非常有用，您可以看到各个样式及其来源，您还可以在计算并应用于样式后查看最终样式集元素。

修改

您可以从计算样式面板

中引用属性及其来源

参考

• Chrome Dev Tools。