Question

我有一个link_to，如下所示：

<td><%= link_to '<span class="glyphicon glyphicon-trash"></span>Delete it'.html_safe, post, method: :delete, data: {confirm: 'Are you sure?'}, class: 'btn btn-danger btn-lg white' %></td>

正如你所看到的，我增加了一个课程＆＃34; white＆＃34;它。它的目的是定义一个CSS来制作文本的颜色＆＃34;删除它＆＃34;在按钮白色。 CSS如下：

.white {
    color: white;
    background-color: yellow;
}

问题在于除了＆＃34; color＆＃34;之外的所有选项。在CSS中工作正常。例如，在上述情况下，＆＃34;背景颜色＆＃34;工作正常，但＆＃34;颜色＆＃34;不是。文本的颜色永远不会改变（保持默认 - 黑色）。

我不知道自己哪里出错了。我该如何解决这个问题？

Answer 1

看起来您可能正在使用Bootstrap。加载Bootstrap后加载自定义CSS文件了吗？要快速解决问题，您可以尝试：

.white { color: white !important; }

但很难推荐作为一种永久的解决方案，它是一种虚假的方式。

要找出哪个CSS实际上是文本的颜色，请右键单击它，检查元素（或浏览器的任何内容），然后按照上面的建议检查计算出的CSS。

Answer 2

虽然user3783614的回答是正确的并且是实现此问题的最简单方法，但我想在他的评论中回答您的问题。

是的，您可以直接更改它们以覆盖引导程序

.white{
  color: white;
  background-color:yellow;
}

但您需要做的是在自定义css文件的*= require bootstrap上使用css导入功能而不是application.css。像这样

@import 'bootstrap';
.white{
  color: white;
  background-color:yellow;
 }

这样你就可以确保在覆盖之前先加载bootstrap。

要确保您可以使用此类

.btn.btn-danger.white{
  color: white;
  background-color:yellow;
}

由于btn-danger设置颜色，因此添加新的层级将确保优先级。

这是jsFiddle

为什么要忽略CSS类？

2 个答案: