23

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

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

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

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

4

3 回答 3

14

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

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

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

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

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

于 2013-10-21T14:01:06.453 回答
3

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

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

格式显示样式的状态：

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

例子：

chrome 调试器图像

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

于 2013-10-21T14:41:33.693 回答
1

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

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

于 2013-10-21T13:58:46.337 回答