css - 是否有 css 调试工具来测试整个样式表是否存在冲突？

Question

我使用 ThemeRoller 为 jquery mobile 创建了一个样式表工具。它在 ThemeRoller 页面上看起来真的很棒。在我的移动应用程序中......不太好。我认为我的样式表和 jquery 样式表之间的定义一定存在一些冲突。

Rails 布局文件:

<%= stylesheet_link_tag "jquery_mob_theme.min", "jquery.mobile-1.1.0.min", "stylin.mobile" %>

对于那些不熟悉 rails 的人，它是这样呈现的:

<link href="/stylesheets/jquery_mob_theme.min.css?1338304118" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.mobile-1.1.0.min.css?1338312435" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/stylin.mobile.css?1337894014" media="screen" rel="stylesheet" type="text/css" />

处理这个问题的唯一方法是通过数千行 css 来查找冲突吗？是否有一个 css 调试工具可以在样式表中检测到它？我可以将 jquery 文件名更改为 scss，然后将它们合并到一个样式表中。我熟悉在一页上检查样式的 Firebug 和 Web 检查器。那没有帮助……对吧？

谢谢。

Answer 1

不幸的是，所有的 css 都是基于继承的，所以没有自动的方式来知道冲突或者一个对象是否刚刚覆盖了父对象的样式。我认为最好的办法是强制 rails 在台式机上显示网站的移动版本，然后您可以使用 Google chrome 检查器。它将向您显示应用于特定对象的所有样式。它仅在样式表中显示带有行号的相关样式，因此您不会被 CSS 困住。您还可以在 chrome 中对其进行编辑，以在更改样式表之前查看更改的外观。