Question

因此，出于某种原因，以下html代码仅响应notice ID，而不响应我的CSS中的flash或<%=key%>类。这是为什么？此外，我有一些样式应该存在取决于我是否显示Flash消息。但是，使用notice id进行样式设置时，CSS始终会显示出来。但是，我需要notice id用于我的ajax渲染flash消息。我该如何解决这个问题？

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

它应该使用id选择器（＃）声明，因为你使用了id（而不是类选择器。）

#notice{}

此外，没有定义flash类所以在你的CSS中，只需添加如下内容：

.flash{color:#F00}

或多或少看到这里的行动（只是粘贴你的HTML并添加flash类）：http://jsfiddle.net/gmedina/uMCDM/1/

Answer 2

很难说没有看到完整的html和css，但是如果你为#notice {}这样的通知ID设置样式，你就不能用你发布的css覆盖它：{{1因为ID在级联中的值高于类（如果我没有记错的话，则为100比10）。

要覆盖.error, .alert, .notice, .success, .info {}的设置，您需要：

#notice

Answer 3

您需要将键值解析为字符串。尝试

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

奇怪的CSS难题

3 个答案: