我如何找出哪种风格覆盖了另一种风格？答案

【问题标题】：How do I find out which style is overriding another style?我如何找出哪种风格覆盖了另一种风格？
【发布时间】：2012-12-28 06:04:11
【问题描述】：

我有一个网站的 HTML/CSS 版本（基于 Bootstrap 构建），我正在将其翻译为 Rails 3 应用程序。

资产管道快把我逼疯了。

由于 gem 生成的 bootstrap_and_overrides.css.scss 文件，它在我的 Rails 应用程序中的显示方式与常规 HTML 文件之间存在冲突。

其中一个似乎是某些字体样式的覆盖。

例如，这就是 1 h3 的外观。

这就是在我的 Rails 应用程序中呈现相同的 h3 的方式。

因此，页面显示方式的问题在于这些特定样式....但我无法弄清楚为什么会覆盖此样式。

我很想知道如何找出这样做的原因。

另外，困扰我的一件事是该屏幕截图上 Rails 版本中的media=all。不确定这是否会导致这些问题。

编辑 1

正如@coreyward 所指出的，这可能是我的样式表的初始化顺序。在我的原始 HTML/CSS 文件中，Bootstrap 和 Font-Awesome 相关的 css 在 main.css 之前声明。但在 Rails 中，情况正好相反。

鉴于我在 application.html.erb 中的初始声明如下所示：

<%= stylesheet_link_tag "application", :media => "all" %>

如何颠倒这些东西的初始化顺序？

编辑 2

我正在使用这个bootstrap-sass gem，问题是它不希望你使用//=require 指令——所以我不能只是重新安排CSS 清单文件中的顺序。或者更确切地说，我不知道该怎么做。

想法？

【问题讨论】：

资产管道在这里根本不应该受到责备，但如果您没有按所需顺序包含资产，可能会产生意想不到的影响。您可能应该刷新有关样式如何在层叠样式表中层叠的知识。
嗯......有趣的一点......我肯定会弄错翻译。但问题是我只有 1 个样式表 - application.css.scss，然后我包含了 Bootstrap 样式表。 Edit1：顺便说一句，你可能是对的。我确实注意到在常规 HTML 版本中，main.css 在引导相关样式表之后被调用。在 Rails 中，情况正好相反。鉴于我刚刚完成了这个问题，我该如何解决：<%= stylesheet_link_tag "application", :media => "all" %> 在我的布局中？
资产管道所做的只是连接和缩小。如果您在其他选择器之后放置相同的特定选择器，它们将覆盖任何相同的属性。这就是为什么在定义自己的样式之前包含 Bootstrap。
对...查看我更新的评论。如何在 Rails 中的样式之前指定 Bootstrap？
@marcamillion 您可以在 CSS 清单文件中执行此操作。见：stackoverflow.com/questions/8890929/…

标签： css ruby-on-rails ruby-on-rails-3 asset-pipeline

【解决方案1】：

media=all 只是意味着包括屏幕和打印。如果您不关心有人打印时网站的外观，那么您可以使用media="screen"。至于为什么其中一些样式被这样覆盖。确保在您的资产管道中没有包含带有require_tree . 的脚手架.css。这通常会吸引很多人。此外，您不必包含整个 bootstrap_and_overrides 文件。如果您只想要那部分，您可以只使用= require twitter/bootstrap/bootstrap。希望这能让你接近。

【讨论】：

是的，我的样式表文件夹中没有scaffold.css。这在过去让我绊倒了，所以我很久以前就摆脱了它。该问题与清单文件中的顺序有关。问题还在于我正在使用的特定 Bootstrap gem (bootstrap-sass) 不喜欢 //=require 指令。

【解决方案2】：

我将 gem 从 bootstrap-sass 切换到 twitter-bootstrap-rails，这允许我指定 require 指令的顺序。

在玩弄了指令的正确顺序之后，我终于找到了一个似乎解决了我的问题的指令。

【讨论】：