奇怪的CSS难题

So for some reason the following html code only responds to the notice id and not the flash or <%=key%> classes in my CSS. Why is that? Also, I have some styling which should exist depending on whether I'm showing the flash message or not. However, using the notice id for styling, the CSS always shows up. However, I need the notice id for my ajax rendering of the flash message. How can I solve this problem?

<div class="container">
  <%= render 'layouts/header' %>
  <section class="round">
    <div id= "notice">
      <% flash.each do |key, value| %>
        <div class="flash <%= key %>">
          <%= value %>
        </div>
      <% end %>
    </div>
    <%= yield %>
  </section>
  <%= render 'layouts/footer' %>
  <%= debug(params) if Rails.env.development? %>
</div>

Here's the CSS:

.error, .alert, .notice, .success, #notice, .info {
     padding:0.8em;
     margin-bottom:1em;
     border:2px solid #ddd;
}
#notice {
     background:#e6efc2;
     color:#264409;
     border-color:#c6d880;
}

And here's the relevant html output. Note that it's only the div.

<section class="round">
  <div id= "notice"></div> 
  <!-- yielded content -->
</section>

you need to parse the key value as a string. try

<div class="flash <%= '#{key}' %>">

well in your CSS the class is defined wrong:

.notice{}

it should be declared with an id selector (#) since you use an id (versus the class selector .)

#notice{}

Also, there is no flash class defined So in your CSS, just add something like this:

.flash{color:#F00}

more or less see in action here (just pasted ur html and add the flash class): http://jsfiddle.net/gmedina/uMCDM/1/

It´s hard to say without seeing the complete html and css, but if you are setting a style for your notice id like #notice {}, you can´t override it with the css you posted: .error, .alert, .notice, .success, .info {} as an ID has a higher value in the cascade than a class (100 vs 10 if I´m not mistaken).

To override settings from #notice you will need:

#notice .alert {
}
// etc.