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

【问题标题】：Is there a way to find out where a css rule is coming from?有没有办法找出 css 规则的来源？
【发布时间】：2013-10-21 13:55:26
【问题描述】：

我继承了一个 .asp 网站，必须更新页面才能将表格中的表单重新定位到侧边栏。

除了顽固地拒绝接受我的 css 并且从谁知道在哪里获取值的页面之外，它在所有页面上都运行良好。

我尝试在 Firefox/Chrome 中进行调试，甚至在页面头部编写规则，但无济于事。有没有识别这种东西的工具？我对css没有懈怠，但这让我感到困惑。我不想求助于 javascript 来解决这个问题，因为我认为这是一个基本问题。

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

【问题讨论】：

检查萤火虫，“检查萤火虫”
嗨，溢出容器的表是您的问题吗？如果是，则与您的问题无关。
谢谢大家。 @Danko - 如果不是 css 那么问题是什么？
您好，看看这个，您有一个包含两列的表格。 “发送查询”按钮位于 colspan=0 的一个 td 上，由于他的宽度，它导致第一列采用他的大小。当您更改 colspan=2 时，它会解决问题。
@Danko - 非常感谢。我已经盯着这个看了这么久，并没有注意到这一点！我讨厌接管其他人的网站！

标签： css

【解决方案1】：

您可以在 Chrome 中使用网络检查器。

右键单击失败的元素并选择检查元素。

您最终应该会看到包含两个部分的 Web 检查器窗口：左侧是 html 节点树，右侧是所选节点的样式和属性。失败的元素应该已经被选中。

接下来，您需要展开“Computed Style”选项卡并查找违规样式。

找到后，您会在样式定义左侧看到小三角形 - 它是可点击的。单击时，它应该展开影响此元素此样式的选择器列表。您将看到每个 css 的 url。宾果游戏。

【讨论】：

谢谢大家。我已经完成了所有这些，但该物业的侧面没有三角形。这是我正在追逐的宽度属性。它有一个 style4 类，在文件的头部声明，但它应该是 100px，结果是 218px。
@user2739763 ：检查是否应用了大于 100px 的最大宽度。或者查看样式选项卡以查看宽度是否被另一个宽度规则或 HTML 元素上定义的宽度属性覆盖
我没有三角形，它只是变灰了

【解决方案2】：

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

不过，样式标签也非常有用。右键单击元素上的“检查”后，样式选项卡将显示与被检查元素相关的所有活动样式和覆盖样式的完整列表。（显示它们是用 CSS 编写的。不是实际呈现的内容）这样你就可以知道哪些样式以什么顺序被覆盖了。您的 css 中的样式可以被内联样式、用户定义的样式、后来定义的 css 文件或更重要的 css 规则覆盖，甚至是非 css 属性，例如直接在 HTML 元素上的宽度/高度属性

格式显示样式的状态：

普通文本 = 激活
删除线 = 无效，因为另一种样式已覆盖它
灰显 = 未应用标识符。（如果您正在检查 <p> 元素的样式并且 css 标识符是 p, span ，那么 span 标识符将显示为灰色）

例子：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：