Ruby 在 Rails - 覆盖 application.css

Ruby on Rails - Override application.css

我正在尝试用包含在 header 中的其他 css 覆盖我的 application.css。我想通过这种方式自定义我的application.css。

我的header

= stylesheet_link_tag 'application', media: 'all'
= stylesheet_link_tag 'customized_css', media: 'all'

实际

application.css.scss 覆盖了我的 tour.css.scss 即使它在任何其他 css

之前加载

编辑

覆盖样式的文件顺序是正确的，但应用程序的选择器特异性胜过游览，这就是原因。解决方案 - 使用 ID 代替。

Documentation

Specificity calculator

感谢@tonyedwardspz的解决方案

您遇到的问题是 CSS 特异性。

您已按正确的顺序声明了 css 个文件。但是，tour.css.scss 中的规则具有较低级别的 css 特异性，因此无法覆盖 application.css.scss 中的声明。

要解决你可以做以下三件事之一：

  • 重写规则以获得更高的特异性。将 class 应用于元素并将其与 tour.css.scss
    • 中的现有规则相结合
  • 重写规则以匹配 application.css.scss 中声明的选择器。这将使层叠按您预期的方式工作，但可能会影响页面上的其他元素。
  • 将 class 应用到特定于每个页面的 body 标记。然后您可以将您的选择定位到一页。

您可以阅读有关 css 特异性 here 的更多信息。