如何检测 CSS 继承源？

Question

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

有什么方便的工具吗？

编辑

这是我在 chrome Computed Style 中得到的（显示继承） 查看方向属性，没有关于它的继承源的信息

Answer 1

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

Chrome 开发者工具

如下图所示。

更多信息请查看Chrome Developer Tools: Element Styles Here

在 Firebug 中

如下图所示。

更多信息请查看CSS Development Here

你可以安装Fire Bug From Here

更新 1：

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

更新 2：

在 Firebug 中，您只需单击下图所示的继承元素。然后它将引导您到相关的继承元素的位置。

P.S. - 使用 chrome 工具也可以做到这一点。

Answer 2

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

编辑

您可以从计算样式面板中引用属性及其来源

参考

• Chrome Dev Tools.