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

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

有时，我发现自己处于一种无法从CSS文件中找出是什么导致忽略此规则的情况。但肯定的是，狩猎本身必须知道它是如何穿越的

---

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

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

查看列表上方未删除的CSS规则

---

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

检查元素时，可以显示“框”。最下面是一个“过滤器”，它应该显示应用于元素的每个属性

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

---

转到Elements>>Computed，您将获得定义您要查找的规则的样式表

转到Chrome开发者工具的“计算”选项卡。查找想要的属性并展开详细信息

---

谢谢，我错过了Safari根据重要性而不是CSS顺序来订购区块的内容。我的情况是，较长的selector table.class td比较短的selector.class高，尽管更具体的selector.class与单个td匹配。为此，一定要使用“计算样式”窗格。您将能够准确地看到导致最终计算结果的级联。Dev tools显示了选择器对面的文件源。阅读chrome Dev tools的帮助文档可能会使您受益，而不是期望从这里获得快速指南。