CSS級聯優先級在Ruby on Rails中顯示不正確

Question

我有這個問題，我在html和css上有一個項目，如果我打開index.html，它的工作就是找到，但是當我將它放在ruby的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打開檢查時，它向我顯示了類似的內容

檢查html和CSS

這就是當我在Ruby on Rails中添加CSS時檢查向我顯示的內容

檢查我何時在Ruby on Rails上運行它

我還嘗試了使用其他Web瀏覽器對預編譯資產進行處理。

Answer 1

該問題是由於缺少#page ID（ #page ）引起的。