Ruby on Rails 无法正确显示 CSS 级联优先级答案

【问题标题】：CSS cascade priority doesn't show right with Ruby on RailsRuby on Rails 无法正确显示 CSS 级联优先级
【发布时间】：2019-03-18 20:27:02
【问题描述】：

我有这个问题，我有一个关于 html 和 css 的项目，如果我打开 index.html，它就可以找到，但是当我把它放在 ruby on rails 中时，css 似乎不能正常工作.

这是css的一部分，只是为了更清楚我想要解释的内容。

#hero {
background: #0619c3 url("bg_hero.jpg");
background-size: cover; }
#hero .container {
  background: url("estudiante.png") no-repeat bottom right;
  background-size: contain; }
#hero .container .row {
  width: 44%;
  padding: 20% 2%; }
  #hero .container .row h1 {
    font-size: 32px;
    color: #fff;
    font-weight: 700;
    padding-bottom: 10px; }
    #hero .container .row h1 span {
      color: #fd78ed; }
  #hero .container .row p {
    color: #fff;
    font-size: 16px; }
  #hero.orientador {
     background: #1785fb url("bg-orientadores.jpg") repeat-y;
     background-size: 36%; }
  #hero.orientador .row {
     background: url("estudiantes.png") no-repeat left 114%;
     background-size: 36%; }
  #hero.padre {
     background: #1785fb url("bg-padres.jpg") repeat-y;
     background-size: 36%; }
  #hero.padre .row {
     background: url("oriem-logo.svg") no-repeat left 58%;
     background-size: 34%; }

问题在于 CSS 级联优先级，但是当我放入 Ruby on Rails 时，它不会优先考虑容器并显示所有内容。

当我只使用 html 和 css 打开检查时，它会显示类似这样的内容

Inspect with html and css

这就是我在 Ruby on Rails 中添加 css 时检查显示的内容

Inspect when I run it with Ruby on Rails

我也尝试过使用不同网络浏览器的预编译资产。

【问题讨论】：

通过查看屏幕截图，#page #hero .container 似乎是稍后在 CSS 代码中定义的（第 218 行）。你确定你在 CSS for Rails 应用中有它吗？
是的！我只是再检查一次。 Rails 应用程序上的 CSS 基本相同，即使我在 Web 浏览器上查看源代码，它仍然存在，但并没有按预期显示。
所以 CSS 没问题。您能否确保.container 在#hero 和#page 元素中（通过检查页面源代码）？
解决了！原来#page 在body 标签中，当我放入Rails 时，我只是删除它，所以它永远不会找到它。谢谢

标签： html css ruby-on-rails

【解决方案1】：

问题是由于缺少正文的 id (#page) 引起的。

【讨论】：