样式表改变字体大小但不改变颜色？

Question

我有一个Ruby on Rails应用程序，使用bootstrap gem和本地样式表。目前，导航栏菜单项为灰色，悬停时变为白色。我希望它们在悬停时变黑，因为条形背景为白色。

在尝试了很多东西后，我现在正在寻找一些更简单的东西：只需将一个链接设为黑色。我已经在链接中附加了一个类：

<li><%= link_to "Home", root_path, { :class => 'top_menu_item'} %></li>

然后，在最后加载的本地样式表中，我有：

.top_menu_item {
  font-size: 100px;
  color: black;
}

这正确地改变了链接的字体大小，我只是为了检查一切是否正常，但颜色是否保持灰色？我猜测我的语法有误，但错误不足以导致错误？

指向Ruby on Rails中使用引导程序的良好资源的指针在长期内也是有益的。感谢。

Answer 1

您的链接样式会被其中一个引导样式覆盖。选项：

• 找到引导程序样式并进行更改（使用控制台跟踪样式链）
• 更彻底地指定目标样式，如：li a.top_menu_item { color: black; }而不是现在的样式。
• 在您的设置上使用!important，例如：color: black !important我不推荐这一点，您应该只在其他所有方法都失败时执行此操作，但有时您需要完成任务。

详细了解样式优先级here。

Answer 2

尝试以下..

.top_menu_item {
  font-size: 100px;
  color: black !important;
}

.top_menu_item a{
  color: black !important;
}