html - HTML 表格行中的交替颜色不起作用

Question

我创建了一个具有以下样式的 JSP，

<style type="css/text">
tr.color1{background-color:#00FCFF;}
tr.color2{background-color:#c1bfbb;}
</style>

我在 JSP 中为属性建模并呈现表格。由于我遍历了在我的 JSP 中建模的列表，我必须为交替的 HTML 表格行设置一个逻辑。

我用过JSTL，有如下代码:

 <c:forEach items="${rSList}" var="rS" varStatus="rowCounter">
      <tr class="${rowCounter.index % 2 == 0  ? 'color2':'color1'}">
          <td style="padding-left: 4px;" >
              <font face="verdana"><c:out value="${rS.NAME}" /></font>
          </td>

          <td style="padding-left: 4px;" >  
              <font face="verdana"><c:out value="${rS.AVAILABLE}" /></font>
          </td>

          <td style="padding-left: 4px;" >  
              <font face="verdana"><c:out value="${rS.OWNER}" /></font>
          </td>

我使用了 Firebug 并看到类确实被替换为:

<tr class="color2">
<!- td data gets displayed here without color2 background-->

<tr class="color1">
<!- td data gets displayed here without color1 background-->

<tr class="color2">
<tr class="color1">
<tr class="color2">

这意味着类被选中，但背景颜色没有改变。感谢任何帮助。

Answer 1

你做的事情应该没有问题，它可以与特定性相关，比如你正在使用 class，但其他一些规则更具体，比如

#demo table tr {
    background: #fff;
}

Demo 失败(具体问题)

所以在上面的例子中，虽然应用了类并且 tr 应该采用背景，但它不会采用，因为您之前必须声明更具体的规则，或者假设您正在使用!重要。您可以检查元素并查看从哪个选择器/规则应用的颜色。

此外，如果您想在很大程度上保存您的标记，您可以简单地使用下面的 CSS，它将应用于表格的奇数行和偶数行，而无需声明类，例如

table tr:nth-child(odd) {
  background: #f00;
}

table tr:nth-child(even) {
  background: #000;
}

Demo