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

【问题标题】：Safari/Chrome Developer Tools debug CSS overridesSafari/Chrome 开发者工具调试 CSS 覆盖
【发布时间】：2011-08-18 03:06:21
【问题描述】：

Safari/Chrome 开发者工具表明 CSS 规则被其他东西覆盖，如图所示。

有时我发现自己无法从 CSS 文件中找出导致此规则被忽略的原因。但是 Safari 本身肯定知道它会通过它。

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

如果你点击一个属性，它会给你文件和行号。

【讨论】：

【解决方案3】：

转到 Elements >> Computed，您将获得定义您正在寻找的规则的样式表。

【讨论】：

【解决方案4】：

看看没有被删除的那个，在列表上更高。

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

【讨论】：

谢谢，我错过了 Safari 按重要性排序块，而不是 CSS 顺序。我的情况是较长的选择器（table.class td）比较短的选择器更高，尽管更具体的选择器（.class）匹配单个 td。
绝对要使用 Computed Styles 窗格。您将能够准确地看到导致最终计算结果的级联。

【解决方案5】：

开发者工具会列出一个元素的所有规则。只需通读所有适用的 CSS 规则，并检查是否存在同名的未删除的规则。

【讨论】：