1

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

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

我在 JSP 中建模一个属性并呈现一个表。因为我遍历了在我的 JSP 中建模的 List，所以我必须设置一个用于交替 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">

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

4

1 回答 1

2

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

#demo table tr {
    background: #fff;
}

演示 失败（具体问题）

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

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

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

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

演示

于 2013-08-22T06:35:40.130 回答