为什么在我的Rails 3应用程序中不能覆盖这种形式的CSS？

Question

所以我有一个application.css文件，内容如下：

.formtastic.clouds .fields .inputs OL LI
{
    float: left;
    width: 290px;
    margin-bottom: -20px;
}

然后我有一个changes.css ，内容如下：

.formtastic.clouds .fields .inputs ol li
{
    float: left;
    width: 280px;
    margin: 0px 5px 0px 0px !important;
}  

我想要changes.css覆盖application.css。 ！important子句什么也没做-当我查看chrome开发工具时，它仍然使用application.css设置来计算属性。 不管我在changes.css中是否有“ margin-bottom：0px！important”，这都是事实。

我必须将application.css更改为此，以注意任何明显的结果：

.formtastic.clouds .fields .inputs OL LI
{
    float: left;
    width: 290px;
    /*margin-bottom: -20px;*/
    margin: 0px 5px 0px 0px;
}

应该注意的是，在我的本地主机上的Rails请求中，在changes.css之后调用了application.css，因此这使我怀疑是由它引起的。 是这样吗

Answer 1

您是否在Firefox上尝试过？ 我在chrome和！important标记上也遇到了类似的问题，这是因为chrome中的某些父html元素被阻止了！重要，所以我不得不修复父css或类似的东西，现在还不记得了，但是也许它将帮助您查看其他部分代码不只是这两个CSS ...

Answer 2

OL，李？ ol, li不是吗ol, li ？

在application.css中要求文件的顺序确实很重要， 下面要求的将覆盖上面的样式（前提是它们与您的情况相同），但是由于您使用的是！important，因此它不应该真的很重要， 除非您对同一元素具有！important且具有相同的特异性，但位于以下所需的文件中（在您的情况下为application.css，而没有！important）

因此，首先将OL，LI更改为ol和li ，如果您想按要求使用CSS文件的顺序进行操作，则可以在app / assets / stylesheets / application.css文件中移动* = require_self （这决定了您的样式在application.css中的加载顺序）。 有关详细信息，请参阅Rails asset pipeline