奇怪的CSS难题 [英] Weird CSS conundrum

问题描述

因此，出于某种原因，以下html代码只会响应通知 id而不是 flash 或<％= key％> 我的CSS中的类。这是为什么？另外，根据我是否显示Flash信息，我有一些应该存在的样式。但是，使用通知 id进行样式设计时，CSS总是显示出来。不过，我需要通知 id来显示flash消息的ajax。如何解决这个问题？

 < div class =container> 
<％=呈现'layouts / header'％> 
< section class =round> 
< div id =notice> 
<％flash.each do | key，value | ％GT; 
< div class =flash<％= key％>> 
<％= value％> 
< / div> 
<％end％> 
< / div> 
<％= yield％> 
< / section> 
<％=渲染'layouts / footer'％> 
<％= debug（params）如果Rails.env.development？ ％GT; 
< / div> 
  

以下是CSS：

  .error，.alert，.notice，.success，#notice，.info {
 padding：0.8em; 
 margin-bottom：1em; 
 border：2px solid #ddd; 
} 
 #notice {
背景：＃e6efc2; 
颜色：＃264409; 
 border-color：＃c6d880; 
} 
  

以下是相关的html输出。请注意，它只是div。

 < section class =round> 
< div id =notice>< / div> 
<！ - 产生的内容 - > 
< / section> 
  

解决方案

/ p>

  .notice {} 
  

它应该使用id选择器（＃）来声明，因为您使用了id（与类选择器相比）。 $ c> #notice {}

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

  .flash {color：＃F00} 
   $ b 
 net / gmedina / uMCDM / 1 /rel =nofollow> http://jsfiddle.net/gmedina/uMCDM/1/   
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>

解决方案
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/

                        
这篇关于奇怪的CSS难题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！