使用 sass 覆盖 <td> 的 <tr> 样式

Question

我目前正在开发一个 Rails 应用程序，我想用背景颜色突出显示一行，但除此之外，在该行中用不同颜色突出显示一个数据单元格。

我遇到的问题是 td 的样式似乎被忽略了。我只是得到整行的背景颜色。

检查 css 客户端，我为 td 应用的样式似乎根本不存在。

生成的html

<table id="project-table" class="table table-hover">
  <thead>
    <tr>
      <th>Row</th>
      <th>Fubar</th>
    </tr>
  </thead>

  <tbody>
    <tr class="clickable-row cheese">
      <td>Row 1</td>
      <td class="'wibble'">Hello World</td>
    </tr>
  </tbody>
</table>

野蛮人

#project-table tbody tr.cheese {
  background-color: yellow;

  & td.wibble {
    background-color: blue;
  }
}

我做错了什么？

ps：使用 bootstrap 3，但我认为这与这个问题无关，是吗？

更新 [已解决]

好吧，看来我是瞎子，没有意识到为class="'wibble'" 生成了一组额外的双引号 - 感谢@Dekel 迅速指出这一点，并让我找到了真正的原因问题。

为了解决产生额外引号的问题，我必须将输出标记为 html_safe：

<td<%= ((index == @project.active_pattern_index) ? ' class="wibble"' : '').html_safe %>>
  <%= pattern.row(count).instruction %>
</td>

Answer 1

td 标签中的class 应该是wibble（而不是'wibble'）。

您不应该在类属性类中使用单引号：''

<table id="project-table" class="table table-hover">
  <thead>
    <tr>
      <th>Row</th>
      <th>Fubar</th>
    </tr>
  </thead>

  <tbody>
    <tr class="clickable-row cheese">
      <td>Row 1</td>
      <td class="wibble">Hello World</td>
    </tr>
  </tbody>
</table>