css - 如何检测 CSS 继承源？

Question

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

有一个方便的工具吗？

编辑

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

Answer 1

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

Chrome 开发者工具

如下图所示。

有关更多信息，请查看Chrome 开发人员工具：此处的元素样式

在萤火虫

如下图所示。

有关更多信息，请在此处查看 CSS 开发

您可以从这里安装Fire Bug

更新1：

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

更新 2：

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

PS - 使用 chrome 工具也可以做到这一点。

Answer 2

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

编辑

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

参考

• Chrome 开发工具。