问有没有办法找出css规则的来源？

EN

你可以在Chrome中使用web检查器。

右击失败的元件并选择inspect element。

你应该会看到带有两个部分的web检查器窗口:左边是html节点树，右边是所选节点的样式和属性。应该已经选择了失败的元素。

接下来，您需要展开"Computed Style“选项卡并查找令人不快的样式。

找到后，你会在样式定义的左边看到一个小三角形--它是可点击的。单击时，它将展开影响此元素的此样式的选择器列表。你会看到每一个css的url。对啰。

正如austin和Waterlink指出的，Computed styles (或FF中的Computed )选项卡可以显示当前应用的样式及其来源。

但是，“样式”的“”选项卡也非常有用。在元素上右击"inspect“时，Styles选项卡将显示与被检查元素相关的所有活动样式和覆盖样式的完整列表。(按照它们在CSS中编写的方式显示它们。而不是实际呈现的内容)，这样您就可以知道哪些样式是以哪种顺序被覆盖的。css中的样式可以从内联样式、用户定义的样式、稍后定义的css文件或更重要的css规则，甚至是直接在HTML元素上的非css属性(如宽度/高度属性)中覆盖

格式显示样式的状态：

• normal text =active
• 删除线=非活动，因为另一个样式已将其覆盖
• 灰显=未应用标识符。(如果您正在检查<p>元素的样式，并且css标识符为p, span，则span标识符将呈灰色显示)

示例：

​

​

在此图像中，#post a的color属性处于非活动状态。它已被#cashieCatalog中的color属性覆盖。

在Firebug的HTML选项卡中，您应该在右侧看到一个面板，其中包含选项卡Style、Computed、Layout和DOM。选择Computed。这将向您显示应用于页面的“当前”样式。

如果展开规则节点，应该会在右侧看到一个链接，显示它来自哪个样式表，以及被覆盖的样式表规则。