为什么我不能在 Ruby on Rails 中不使用 !important 来更改 link_to 文本颜色？答案

【问题标题】：Why can't I change link_to text color without using !important in Ruby on Rails?为什么我不能在 Ruby on Rails 中不使用 !important 来更改 link_to 文本颜色？
【发布时间】：2021-01-18 00:56:25
【问题描述】：

我正在尝试更改我的 link_to 文本颜色。我看过很多问题和文章，人们可以在没有!important 属性的情况下更改link_to 文本颜色。但是没有它，我的链接颜色不会改变。这是因为最近的变化，还是我做错了什么？我确实注意到，当我刷新页面时，有一瞬间，链接会更改为我分配给它们的颜色，但随后会立即变回默认的灰色。

重现问题

运行rails new app。

运行cd app

运行rails g scaffold Car model:string。

将以下代码添加到app/assets/stylesheets/applications.css 文件中。

.test {
  color: red;
  padding: 50px;
}

添加指向app/views/layouts/applications.html.erb 文件的链接（在body 标签内）。

<%= link_to 'Testing', nil, class: "test" %>

结果

Testing 是我要更改的链接颜色。如前所述，链接的文本颜色没有改变，但填充已成功应用。

在检查时，我还注意到颜色属性被划线了。

【问题讨论】：

标签： css ruby-on-rails ruby

【解决方案1】：

使用脚手架时，了解脚手架创建的内容很重要。就我个人而言，脚手架非常适合快速基本的杂物。但是它带来了很多。

至于您的问题，脚手架会创建一个覆盖您的样式的脚手架.scss。尝试将其注释掉，然后它应该可以工作（它对我有用！）。

【讨论】：

谢谢！这就是问题所在。几天来我一直在努力试图弄清楚。非常感谢您的帮助:)

【解决方案2】：

找出这个来自哪里的最快方法是点击red;旁边的漏斗图标。它将过滤您将颜色应用于元素的每个位置。可能应该在您的 CSS 下方声明一些 !important，但它仍然占上风。

当它被描边时，它表示它在其他地方被覆盖，这是一个错误的 CSS 属性或类似的东西。

【讨论】：

你完全正确。我注释掉了一个a:active 伪类，我的颜色被成功应用了。主要问题来自scaffold.scss。它覆盖了我的风格。

【解决方案3】：

这个问题与 Rails 或 link_to 无关。您只是在尝试设置 a.test 元素的样式。

您绝对不需要将important 用于新应用程序。 CSS 级联可能会变得复杂，但这不应该是一个复杂的情况。

CSS 基于级联和特异性。您可能有其他 CSS（在您粘贴到检查器中的部分之上）覆盖了 .test 类，或者 CSS 中的某些内容更具体（因为您只是在设置 .test 的样式。

由于这是一个链接 (a)，您应该尝试在 CSS 中使用 a.test，并且您可能还需要设置 :hover 和 :visited 伪类的样式。

【讨论】：

感谢您的回复。我只是注意到（感谢 AceCleric）我写的样式被scaffold.scss 文件覆盖。你是对的。当我更具体地使用我的选择器时，一切都奏效了。