html - CSS 级联优先级在 Ruby on Rails 中显示不正确

Question

我有这个问题，我有一个关于 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

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

Answer 1

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