如何查看CSS规则来自哪里？

Question

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

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

我尝试过在 Firefox/Chrome 中调试，甚至在页面头部编写规则，但没有成功。有没有一个工具可以识别这种东西？我对 css 并不懒惰，但这让我感到困惑。我不想诉诸 javascript 来解决这个问题，因为我认为这是一个基本问题。

有没有办法找出CSS规则来自哪里？

Answer 1

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

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

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

接下来，您需要展开“计算样式”选项卡并查找有问题的样式。

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

Answer 2

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

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

格式显示样式的状态：

• 普通文本=活动
• 删除=不活动，因为另一种样式已覆盖它
• 灰显 = 未应用标识符。 （如果您正在检查

  <p>

  元素的样式并且 css 标识符为

  p, span

  ，则

  span

  标识符将显示为灰色）

示例：

在此图像中，

color

的

#post a

属性处于非活动状态。它已被

color

中的

#cashieCatalog

属性覆盖。

Answer 3

在 Firebug 的

HTML

选项卡中，您应该会在右侧看到一个面板，其中包含选项卡

Style

、

Computed

、

Layout

和

DOM

。 选择

Computed

。 这将向您显示应用于页面的“当前”样式。

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