奇怪的 CSS 难题答案

【问题标题】：Weird CSS conundrum奇怪的 CSS 难题
【发布时间】：2011-03-04 18:20:47
【问题描述】：

因此，出于某种原因，以下 html 代码仅响应 notice id 而不是我的 CSS 中的 flash 或 <%=key%> 类。这是为什么？此外，我有一些样式应该存在，具体取决于我是否显示 Flash 消息。但是，使用notice id 进行样式设置时，CSS 总是会显示出来。但是，我需要notice id 来进行 Flash 消息的 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>

【问题讨论】：

你能添加纯 HTML 输出和相关的 CSS 吗？（不是我的反对票）
您发布的内容中没有 Flash 课程...
是的，有：
在css中我的意思是你那里没有flash。那么如果它不存在，你希望它如何响应你的 css 中的 flash 类？
你能在 Ruby 执行后添加纯 HTML 吗？ :)

标签： html ruby-on-rails css ruby ajax

【解决方案1】：

如果没有看到完整的 html 和 css，很难说，但如果您正在为通知 id 设置样式，例如 #notice {}，则不能用您发布的 css 覆盖它：.error, .alert, .notice, .success, .info {} 作为ID 在级联中的值高于一个类（如果我没记错的话，100 对 10）。

要覆盖 #notice 的设置，您需要：

#notice .alert {
}
// etc.

【讨论】：

是的，我发布了错误的 CSS。我重新发布了正确的 CSS。这个问题现在可能更有意义

【解决方案2】：

在你的 CSS 中，类的定义是错误的：

.notice{}

应该使用 id 选择器 (#) 声明它，因为您使用的是 id（相对于类选择器。）

#notice{}

另外，没有定义 flash 类因此，在您的 CSS 中，只需添加如下内容：

.flash{color:#F00}

或多或少在这里看到实际操作（只需粘贴您的 html 并添加 flash 类）：http://jsfiddle.net/gmedina/uMCDM/1/

【讨论】：

好吧，更新后的 CSS 仍然缺少这样的东西 .flash{}
那么我的 CSS 应该是什么样的？这就是我要问的
检查一下，在css中添加了一个flash类jsfiddle.net/gmedina/uMCDM/1
这并不是那么简单，因为在没有消息的情况下会出现一些不应该出现的样式。你介意看看我的代码github.com/meltzerj/sample_app

【解决方案3】：

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

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

【讨论】：

你总是可以尝试这样的：' "flash #{key}") %>'
它是一个帮助器，将呈现您现在拥有的 div。因为您的问题似乎是 div 没有正确渲染，如果问题出在您的嵌入式红宝石上，这应该可以解决问题。无论如何都值得一试
这个应该替换什么？我应该摆脱
吗？
不要摆脱和之间的所有内容，然后将其放在那里
value 未定义，你的意思是#{value}