Safari/Chrome开发者工具会通过在CSS规则上加删除线的方式来表示该规则被其他内容覆盖，如下图所示。
有时候我会遇到这样的情况：无法从CSS文件中找出导致该规则被忽略的原因。但是Safari本身肯定知道，因为它已经将其划掉了。
是否有一种方法可以知道是什么覆盖了这个规则？
Safari/Chrome开发者工具调试CSS覆盖
8
- Laas
2
3开发工具会在选择器对面显示文件源代码。 - zzzzBov
你可能会从阅读Chrome Dev工具的帮助文档中受益，而不是期望从这里获得快速指南。 - Nisarg Shah
5个回答
9
看一下列表中没有被划掉的那一个，它在列表中较高位置。
或者查看计算样式。它们将是最终应用的样式。
- alex
2
谢谢，我错过了Safari按重要性而不是CSS顺序对块进行排序的事实。我的情况是较长的选择器（table.class td）比更具体的选择器（.class）高，尽管后者匹配单个td。 - Laas
2一定要使用“计算样式”面板进行此操作。您将能够查看导致最终计算结果的确切级联。 - Paul Irish
3
当你检查一个元素时，你可以展示它的 '盒子'。下方就有一个 '过滤器'，它会显示应用在你的元素上的每个属性。
如果你点击一个属性，它会告诉你文件和行号。
如果你点击一个属性，它会告诉你文件和行号。
- sheplu
1
开发人员工具将列出元素的所有规则。只需阅读应用的所有CSS规则，并查找具有相同名称的未被划掉的规则。
- Amadan
1
进入“元素”>>“计算”即可获取定义所需规则的样式表。
- jmargolisvt
1
前往Chrome开发者工具的计算选项卡。找到所需属性并展开详细信息。
- Alexander
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接