Safari / Chrome开发者工具调试CSS覆盖

Question

Safari / Chrome开发者工具指示CSS规则被其他内容覆盖，如图所示。

有时我发现自己陷入了无法从CSS文件中找出导致忽略此规则的原因。但是，当它通过它时，Safari本身必须知道它。

有没有办法知道是什么覆盖了这样的规则？

Answer 1

查看未被删除的那个，列在列表的上方。

或者，查看计算的样式。它们将是最终的应用风格。

Answer 2

检查元素时，您可以显示“＆＃39;框”。最重要的是，你有一个＆＃39;过滤器＆＃39;它应该显示应用于元素的每个属性。

如果单击某个属性，它将为您提供文件和行号。

Answer 3

开发人员工具将列出元素的所有规则。只需阅读所有适用的CSS规则，并检查具有相同名称的非打击规则。

Answer 4

转到Elements＆gt;＆gt;计算后，您将获得定义您正在寻找的规则的样式表。

Answer 5

转到Chrome开发者工具的计算标签。找到想要的财产并扩展细节。