Странная головоломка CSS

Question

Так что по какой-то причине следующий HTML-код отвечает только на идентификатор notice, а не на классы flash или <%=key%> в моем CSS.Это почему?Кроме того, у меня есть некоторые стили, которые должны существовать в зависимости от того, показываю ли я флэш-сообщение или нет.Однако при использовании идентификатора notice для стиля CSS всегда отображается.Тем не менее, мне нужен идентификатор notice для моего рендеринга ajax флеш-сообщения.Как я могу решить эту проблему?

<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>

Вот 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;
}

А вот соответствующий вывод HTML.Обратите внимание, что это только div.

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

Answer 1

ну в вашем CSS класс определен неправильно:

.notice{}

он должен быть объявлен с селектором идентификатора (#), так как вы используете идентификатор (в отличие от селектора класса.)

#notice{}

Также не определен класс flash Так что в вашем CSS, просто добавьте что-то вроде этого:

.flash{color:#F00}

более или менее смотрите здесь в действии (просто вставьте ваш html и добавьте класс flash): http://jsfiddle.net/gmedina/uMCDM/1/

Answer 2

Трудно сказать, не видя полного HTML и CSS, но если вы устанавливаете стиль для своего идентификатора уведомления, например #notice {}, вы не можете переопределить его с отправленным вами CSS: .error, .alert, .notice, .success, .info {} какID имеет более высокое значение в каскаде, чем класс (100 против 10, если я не ошибаюсь).

Чтобы переопределить настройки из #notice, вам потребуется:

#notice .alert {
}
// etc.

Answer 3

вам нужно проанализировать значение ключа как строку.попробуйте

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