对更新的CSS文件所做的更改未生效

Question

I have the following haml file in my ROR application, which I am trying to implement typography and font changes to via CSS for the portion of text under #index_orders . However, when I've implemented the changes below, specifcally in the CSS file, nothing is taking effect when I refresh my development environment (localhost:3000).

Here is the haml file below with the appropriate nesting and spacing included:

index.html.haml

<div class="jumbotron">
%h1 <center><font color ="#c0392b"><i>Hello World!</i></font>
<center>
%br/
%h3 Some Generic Message, Woot! :)
%br/
<a class="btn btn-danger btn-lg" href="#" role="button">Sign Up</a>

#index_orders
  - @orders.each do |order|
      %h3= link_to order.date.strftime("%A %B %d, %Y"), order
      %h4= order.name

Now here is the select portion of the application CSS file with the relevant code:

application.css.scss

#index_orders {
    h2 {
        margin-bottom: 0;
        font-weight: 100;
            a {
               color: white;
            }
        }
    }

Why aren't the font color/typography changes taking effect?

Many thanks!

Answer 1

The styling rule is only targeting the h2 element. As there is not an h2 element in your index.html.haml, you will not see the anticipated visual changes.

To see the styling rule applied, change the h2 selector in application.css.scss to target the desired h1 or h3 element.

For example,

#index_orders {
    h3 {
        margin-bottom: 0;
        font-weight: 100;
            a {
               color: white;
            }
        }
    }